码迷,mamicode.com
首页 > 其他好文 > 详细

关于px em rem的一点小总结

时间:2015-11-28 06:36:15      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

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

  1. 可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值,这里就不一一举例了

  2. 没有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的用处

开发响应式网页设计、设置网页字体大小自适应

关于px em rem的一点小总结

标签:

原文地址:http://www.cnblogs.com/hamsterPP/p/5002116.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!