响应式网页设计rem em设置网页字体大小自适应.doc

《响应式网页设计rem em设置网页字体大小自适应.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、响应式网页设计:rem、em设置网页字体大小自适应「rem」是指根元素（rootelement，html）的字体大小，好开心的是，从遥远的IE6到版本帝Chrome他们都约好了，根元素默认的font-size都是16px。这样一个新的单位兼容性如何呢？IE9+，Firefox、Chrome、Safari、Opera的主流版本都支持了，我可以放肆的使用rem了。em的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以rem的出现解救了我这样不会算术的人，再也不用担心父级元素的font-size了，因为它始终是基于根元素（html）的。比如默认的htmlfon

2、t-size=16px，那么我想设置12px的文字就是：12÷16=0.75（rem）当然，你可以引入CSS预处理工具（Sass、LESS、Stylus等）自动计算rem值，这里就不一一举例了。但是像我这样的懒人或者团队开发中还没有引入 CSS预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下html的默认font-size=10px不就好计算了嘛！Likethis：html{font-size:62.5%;/*10÷16=62.5%*/}body{font-size:12px;font-size:1.2rem;/*12÷10=1.2*/

3、}p{font-size:14px;font-size:1.4rem;}需要注意的是，为了兼容不支持rem的浏览器，我们需要在rem前面写上对应的px值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%，还是设置为 font-size:62.5%，如果你引入了CSS预处理工具那么自然可以使用默认值，如果由于其他原因使用 font-size:62.5%也无可厚非，完全可以在body中重置回你需要的默认font-size。