px、pt、em与rem的区别（结尾不容错过哦）

　　最近学DRP视频的时候讲到了CSS部分，里面又一次讲解了字体的大小一部分知识，然后就收集了一下相关的介绍分享给大家。

　　1、px单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的，国内用的较多，目前还是推荐使用px为好。

　　2、em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多。

　　3、pt单位名称为点（Point），绝对长度单位一般老版本的table使用长度大小的单位，但是现在基本上已经不使用了。

　　4、rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

　　下面就让我们逐个来认识一下：

①px ：像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

px 特点：
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

②em ：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
em 特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

③rem ：是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

④pt ：印刷业上常使用的单位，磅的意思，一般用于页面打印排版，它等于1/72英寸。

　　我相信看到这篇文章前100名的朋友在设置页面字体大小时95%都是使用PX这个单位来调整的，查阅相关文章是看到了一篇这样的文章，文章的标题很吓人——95%的中国网站需要重写CSS ，很吓人但是确实是存在这样的问题的，我们应该慢慢调整我们的编程习惯，让它更加适合用户的需要。

　　最近APP很火，在APP中我们设置字体大小时就可以使用rem这个目前还是很低调的CSS单位，它对于不同尺寸屏幕的适应性就目前看应该是最好的，给大家推荐另一篇文章——web app变革之rem。

　　希望这篇文章你能喜欢，谢谢~

px、pt、em与rem的区别（结尾不容错过哦）相关推荐

CSS单位 px pt em和rem 之间的区别
CSS中可以定义大小的单位有四种px,pt,em,rem,而px可以说在网页开发中最常见的单位了.不过现在如今的大多数网站已经开始用rem这个单位了.那么这四个单位有什么区别呢? px|pt|em|r ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
px、em 和 rem 三者区别
px.em 和 rem 三者有什么区别? PX px 实际上就是像素,用PX设置字体大小时,比较稳定和精确. px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...
css中px、em和rem的区别总结
前言 em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值.浏览器使 ...
html5 px和em的区别,pt 与 px、em、rem 的区别与换算
DPI/pt/px 单位的含义 DPI(Dots Per Inch) 每英寸像素数.Windows 系统默认是 96dpi,Apple 系统默认是 72dpi. pt (point,磅) 是一个物理长 ...
css中单位px、pt、em和rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...
CSS中 px、em、rem区别
PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...
说说css中pt、px、em、rem都扮演了什么角色
前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...

px、pt、em与rem的区别（结尾不容错过哦）

px、pt、em与rem的区别（结尾不容错过哦）相关推荐

最新文章

热门文章