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. Ignite-Spark

    2017.12.02 Ignite-Spark 讲ppt的时候还是很紧张 PPT地址 https://files.cnblogs.com/files/swobble/Spark.pptx

  2. java内存模型JMM理解整理

    什么是JMM JMM即为JAVA 内存模型(java memory model).因为在不同的硬件生产商和不同的操作系统下,内存的访问逻辑有一定的差异,结果就是当你的代码在某个系统环境下运行良好,并且 ...

  3. 莫烦PyTorch学习笔记(六)——批处理

    1.要点 Torch 中提供了一种帮你整理你的数据结构的好东西, 叫做 DataLoader, 我们能用它来包装自己的数据, 进行批训练. 而且批训练可以有很多种途径. 2.DataLoader Da ...

  4. SpringBoot_02_SpringBoot的配置文件

    1.SpringBoot配置文件 SpringBoot是基于约定的,所以很多配置都有默认值,但如果想使用自己的配置替换默认配置的话,就可以使用application.properties或者appli ...

  5. PAT甲级——A1076 Forwards on Weibo

    Weibo is known as the Chinese version of Twitter. One user on Weibo may have many followers, and may ...

  6. 引用不了XXservice,怎么办？

    1.tEdasArchiveLogService = (TEdasArchiveLogService) SpringContextHolder.getBean("TEdasArchiveLo ...

  7. [Ynoi2012]D1T1

    题目 套路的根号分治啊 我们设置一个值\(S\) 对于\(S\leq x\)的操作,我们直接暴力修改,显然这样只会修改\(\frac{n}{S}\)次,所以我们需要一个能够\(O(1)\)修改的数据结 ...

  8. Spring Boot使用Swagger2

    1.添加Swagger2依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>spri ...

  9. 新浪新闻API

    新浪新闻API ustcmio 关注 2017.01.15 20:44* 字数 536 阅读 2479评论 2喜欢 7 新浪新闻的API:1.访问手机新浪网https://sina.cn/?from= ...

  10. AppServer获取参数的方法

    AppServer中从APP_PARAM表中根据param_code获取param_value: appManageService.getParamValueByCode(param_code) -- ...