关于px em rem的一点小总结
2015-11-28
06:06:40
概念
都是CSS单位。
px:像素 Pixel。像素 (计算机屏幕上的一个点)
em:1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如，如果某元素以 12pt 显示，那么 2em 是24pt。 如未人为设置字体尺寸，那么1em=16px这个所有浏览器默认的字体高。
pt:磅 (1 pt 等于 1/72 英寸)；
pc:12 点活字 (1 pc 等于 12 点) rem:
特点
px:
使用px作为单位的字体的，部分浏览器无法调整；而em rem则可以比较好的适应
Firefox能够调整px和em，rem
em:
由于默认1em =16px，所以为了方便计算，一般在body里声明：font-size:62.5%,这样一来，1em=10px,2em=20px,只要将原来的px数值除以10，就换算成em单位了。
em的值是相对于父级元素的字体大小，如果父级元素的字体大小改变了，那么em的值也会改变，所以麻烦在于：em要经常人为换算。
例如：
.d1{ font-size: 2.2em;}
.d2{ font-size: 2.2em;}
<div class="d1">
dddd地道道的
<div class="d2">dddd反复复</div>
</div>
那么实际显示出来，d1的字体为35.2px,d2的字体则为35.2*2.2=77.44px，需要将d2的字体设置为1em，才与其父元素相同是35.2px
ps：谷歌浏览器最小字体12px，所以不管是用px，亦或是em设置成10px,都会显示成12px的大小
rem
相对单位，root element， 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
如何用rem
-
可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了
-
没有SASS的情况下，改html 的默认字体大小，写入font-size:62.5%，即10px.
但为了兼容不支持rem的浏览器，需要在写rem的单位前面写上px单位， 这样不支持rem的浏览器就可以优雅降级。 例如： html{ font-size:62.5%; /* 10÷16=62.5% / } body{ font-size:12px; font-size:1.2rem ; / 12÷10=1.2 */ } p{ font-size:14px; font-size:1.4rem; }
PS：关于谷歌最小12px的问题
我本人测试，关于em,如果在父元素设置了font-size:62.5%,父元素的字体最终显示12px.但其子元素如果设置2em,最终显示为20px,即依旧以10px作为基准的。
关于rem,如果在html设置font-size:62.5%；body中的其他元素设置字体1rem,最终显示为12px;设置2rem,显示20px;设置2.2rem,显示22px;
其他浏览器未测试。
动态计算获取html的font-size
页面基准320px(20px),html font-size值的计算：
var ele=document.getElementsByTagName("html")[0],
size=document.body.clientWidth/320*20;
ele.style.fontSize=size+"px";
其他单位
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。 vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。
em rem的用处
开发响应式网页设计、设置网页字体大小自适应