迅速理解响应式开发中px、em、rem

一、前言(唠叨ing...)

　　这两天想学这做一下响应式网站，以前一直是固定的网页只要窗口的尺寸发生变化那简直惨不忍睹（所以想着做一个拿的出手的一些作品）于是自己去学了一下自适应但感觉并未完全掌握所以呢有个响应式的教程就照着做，然后再把自己以前做过的网页完善优化一遍（有个实战，感觉以前很多不懂的一下子全理解了）。

二、px  em  rem的区别与使用

　　在学习过程中遇到不同的元素单位比如px、em和rem，所以在这儿总结一下：

　　px：固定设计，百分百还原设计图。但现在各种终端的流行假如只是单一的设置，那么页面真的会惨不忍睹。1px可以理解相当于1个像素，但是并不是真的等于一个像素（eg：在pc端设置1px等于一个像素，但是同样的1px在移动端或者在分辨率特别高的一些终端比如6s：326ppi那么1px就不会真的等于一个像素了。有兴趣的可以看下这个链接：http://www.cnblogs.com/2050/p/3877280.html）。

　　rem：相对字体大小，它参照的对象是html也就是根元素。因为参照的对象是根元素所以避免了字体大小逐层复合的连锁反应而且只要调整根元素就可以调整所有字体的大小。

　　em：相对字体大小，它参照的对象是父元素，若直接父元素（font-size）没有那么它会继续向上查找一直找到根元素，当根元素也没有的时候那么使用默认的值1em=16px。

　　请看代码：

1 <html>
2 <head></head>
3 <body>
4     <div>
5            <p>字号</p>
6     </div>
7 </body>
8 </html>

　　css代码（rem）：

1 html{font-size: 20px;}
2 div{font-size: 2rem;}
3 p{font-size: 1rem;}

　　那么  div -> font-size = 2 * 20px = 40px；  p -> font-size = 1 * 20px = 20px； 当然可以直接设置 html{ font-size: 62.5%; } 那么 1rem = 10px

　　css代码（em）：

1 html{font-size: 20px;}
2 div{font-size: 2em;}
3 p{font-size: 1em;}

　　那么 div -> font-size = 2 * 20px = 40px；  p -> font-size = 1 * 40px = 40px；

　　以上三点就是这三个单位的区别，在响应式开发过程中rem无疑优势尽显但是也存在一点兼容问题 IE9/IE8及以下不支持，但是可以使用这种方式解决以下（font-size：16px；font-size：1rem；）将16px写在1rem之前那么IE则只会认识第一种，而兼容的则根据css的就近原则会读取最后1rem这个样式。

　　

posted @ 2017-08-04 16:42  鬆先生  阅读(250)  评论(0)    收藏  举报