PX、PT、EM、ex和in等都是我们常用的长度单位，尤其在网页的字体大小中经常用到。但是你知道PX、PT和EM之间是如何进行准换的吗？这里icech为大家找到了一个px、pt、em和percent大小转换的一个表格，尤其针对字体大小的转换十分方便。希望大家能够喜欢！

PX和PT转换的公式：

以前icech在文章中介绍过PX和PT的转换规则，其实很简单，pt=px乘以3/4。
比如12px×3/4=9pt大小。

PX和em转换的公式：

对于PX转em的方法也类似，就是em=16乘以px，也就是说1.5em=1.5×16=24px。

设计中常用PX/EM/PT/百分比转换表格

Pixels EMs Percent Points
6px 0.375em 37.50% 5pt
7px 0.438em 43.80% 5pt
8px 0.5em 50% 6pt
9px 0.563em 56.30% 7pt
10px 0.625em 62.50% 8pt
11px 0.688em 68.80% 8pt
12px 0.75em 75% 9pt
13px 0.813em 81.30% 10pt
14px 0.875em 87.50% 11pt
15px 0.938em 93.80% 11pt
 
16px 1em 100% 12pt
17px 1.063em 106.30% 13pt
18px 1.125em 112.50% 14pt
19px 1.188em 118.80% 14pt
20px 1.25em 125% 15pt
21px 1.313em 131.30% 16pt
22px 1.375em 137.50% 17pt
23px 1.438em 143.80% 17pt
24px 1.5em 150% 18pt
 
 

常用长度单位PX/EM/PT/百分比转换公式与对照表的更多相关文章

  1. html px em pt长度单位(像素 相对长度 点)知识(转)

    html px em pt单位区 一.PX\EM\PT单位介绍 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐:em单位名称为相对长度单位.相对于当前对象内文本的 ...

  2. 网页常见单位： px em pt % rem vw、vh、vmin、vmax ， rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

  3. px/em/pt区别和转换

    老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的“95%的中国网 ...

  4. 02_css3.0 前端长度单位 px em rem vm vh vm pc pt in 你真的懂了吗？

    1:废话不多说,直接看如下图表: 2:px就不过多介绍了,就是像素点的大小,加入您的屏幕分辨率为1920,则每一个相当于每一个有横着的1920个像素点: 3:em 为相对单位,一般以 body 内的 ...

  5. Html 字体大小单位 px em pt

    网页上定义字体大小有常见三种单位,px.em.pt px px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在80 ...

  6. pt和px区别 pt是逻辑像素，px是物理像素

    pt和px区别 pt是逻辑像素,px是物理像素字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:pt就是po ...

  7. px 与 pt

    px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便: pt:point,是一个标准的长度单位,1pt＝1/72英寸,用于印刷业,非常简单易用: em:即%,在CSS中,1em＝100 ...

  8. 前端常用长度单位（px，em，rem，pt）介绍

    CSS中有不少属性是以长度作为值的.盒模型的属性就是一些很明显的值属性:width.height.margin.padding.border.除此之外还有很多其他的CSS属性的值同样也是长度值,像偏移 ...

  9. （转）CSS字体大小: em与px、pt、百分比之间的对比

    CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...

随机推荐

  1. HashMap数据结构

    2.1 HashMap 2.1.1 HashMap介绍 先看看HashMap类头部的源码: public class HashMap<K,V> extends AbstractMap< ...

  2. ThinkPHP可以支持直接使用字符串作为查询条件

    ThinkPHP可以支持直接使用字符串作为查询条件,但是大多数情况推荐使用数组或者对象来作为查询条件,因为会更加安全. 大理石平台哪家好 一.使用字符串作为查询条件 这是最传统的方式,但是安全性不高, ...

  3. Element-ui之修改样式

    修改样式的方法 官网上面介绍了几种方法: 当然还有其他的方法,比如: 直接在标签上面采用行内式: 在组件中的style里面添加样式: 引入.scss文件(注意:如果是公用样式最好在index.scss ...

  4. springboot与任务（定时任务）

    描述: 项目开发中经常需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息.Spring为我们提供了异步执行任务调度的方式,提供TaskExecutor .TaskScheduler ...

  5. 使用phpStudy自带的mysql-front学习建库建表以及基本的mysql语句

    1.鼠标左键phpStudy图标,点击mysql管理器,如下图 2.选择Mysql-Front,选择localhost进入,可以看到本地建立的数据库.然后新建一个数据库,如下图: 3.在新建的数据库上 ...

  6. Bitcoin 的基本原理

    昨天读到了 Bitcoin 的中文介绍,觉得非常有意思.不过上面这篇文章解释的非常不靠谱,我花了一晚上去Bitcoin的官方网站 仔细研究了一下,总算理解了其原理.感觉非常有启发,尤其是对虚拟货币的流 ...

  7. 11-3-while

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue 监听返回

    mounted: function() { //使用keep-alive时可以放在activated内 if (window.history && window.history.pus ...

  9. myeclipse工程更新后java图标变为空心的解决办法

    今天用svn更新了工程发现目录结构改变了,同时所有的java文件的图标变成了空心的.解决办法如下 1.右键单击工程目录名,选择properties. 2.选择java bulid path,正常的应该 ...

  10. Luogu P1850 换教室(期望dp)

    P1850 换教室 题意 题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有\(2n\)节课程安排在\(n\)个时间段上.在第\(i(1\l ...