常用长度单位PX/EM/PT/百分比转换公式与对照表

更新日期: 2018-03-05阅读: 6.8k标签: 单位

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


PX、PT、EM的解释: 

px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便;
pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;
em:即%,在css中,1em=100%,是一个比率,结合CSS继承关系使用,具有灵活性。


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/百分比转换表格

PixelsEMsPercentPoints
6px0.375em37.50%5pt
7px0.438em43.80%5pt
8px0.5em50%6pt
9px0.563em56.30%7pt
10px0.625em62.50%8pt
11px0.688em68.80%8pt
12px0.75em75%9pt
13px0.813em81.30%10pt
14px0.875em87.50%11pt
15px0.938em93.80%11pt
 
16px1em100%12pt
17px1.063em106.30%13pt
18px1.125em112.50%14pt
19px1.188em118.80%14pt
20px1.25em125%15pt
21px1.313em131.30%16pt
22px1.375em137.50%17pt
23px1.438em143.80%17pt
24px1.5em150%18pt

链接: https://www.fly63.com/article/detial/463

理解并使用CSS3中的单位rem vh vw vmin vmax

rem vh vw vmin vmax做为CSS3中的新单位,对CSS3的单位的使用了解是非常重要的,也许你会遇到一个问题可以通过css的这些单位得到解决,同时对于rem,vh和vw,百分比等都是我们做自适应网站常用的方法。

CSS中字体单位:px、em、rem和%

对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem…等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手。

被误解的 em 单位

em 单位往往被认为是相对于父元素的 font-size 大小来进行计算的。例如一个元素的父元素设置了如下的 font-size:而其中的 div 设置了 font-size 设置了 1.5em :那么 div 元素的 font-size = 20 * 1.5 = 30px.

CSS尺寸单位

前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍

CSS角度单位:deg、grad、rad、turn

度(Degress)。一个圆共360度;梯度(Gradians)。一个圆共400梯度;弧度(Radians)。一个圆共2π弧度;转、圈(Turns)。一个圆共1圈

CSS3单位

像 px、rem、em、% 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。

高清屏下canvas重置尺寸引发的问题

我们知道,清空canvas画布内容有以下两个方法。 第一种方法是cearRect函数:二种方法就是用原值重新设置一下canvas的宽(或者高)第二种方法可以起作用,是因为canvas的一个特点:

CSS单位之间的关系

像素 (px) 是一种绝对单位(absolute units), 因为无论其他相关的设置怎么变化,像素指定的值是不会变化的。其他的绝对单位如下:mm, cm, in: 毫米(Millimeters)

css 角度单位有哪些?

CSS角度单位有:deg、grad、rad、turn;下面本篇文章给大家介绍一下这些CSS角度单位。度(Degress)。一个圆共360度;梯度(Gradians)。一个圆共400梯度;弧度(Radians)。一个圆共2π弧度;转、圈(Turns)。一个圆共1圈

html中1pt等于多少px?

在印刷排版中,point是一个绝对值,它等于1/72英寸,可以用尺子丈量的,物理的英寸。但是在css中pt含义却并非如此。因为我们的显示器被分割为了一个个的像素,单个像素只能有一种颜色,要在屏幕上显示

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!