响应式布局之 px、em、 rem

 

1、写在前面的话

　　做为一面前端开发者，对 px 、em 、 rem 应该是再熟悉不过了，但大多数小伙伴应该都和我同样仅仅停留在了解的层面，并非实质性的掌握它们。本文对三者进行了详细的总结和详细说明，不熟悉的各位小伙伴阅读本文必定会有所收获，若是你对这三者已经了解的很是透彻，那本文可能对你的帮助不大。

 2、简述

　　px、em、rem都是计量单位，都能表示尺寸，可是有有所不一样，并且其各有各的优缺点。

3、PX （pixel）

　　Px 表示“绝对尺寸”（并不是真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有必定的区别），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，所以通常不用于响应式网站。 

注：
 一、像素 1024x768 的，表示的是水平方向是 1024 个像素点，垂直方向是 768个 像素点。　　
 二、以上所述 px 为 css 中定义的像素（如下简称 css 像素），与实际的物理像素是有区别的，早期电脑屏幕的物理像素与 css 像素相同，可是随着科技的发展，高精度屏幕开始出如今人们的视野中。以 iPhone 的 Retina
　　屏为例，其物理像素与 css 像素关系见下图。

 

　　为此移动端浏览器以及某些桌面浏览器引入了 devicePixelRatio（DPR 设备像素比）属性，其官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。而 css 像素=独立像素，由此咱们能够得出 devicePixelRatio = 物理像素 / css 像素，进而能够推算出该设备上一个 css 像素表明几个物理像素。例如 iPhone 的 retina 屏的 devicePixelRatio = 2，那么该设备上一个 css 像素至关于 2 个物理像素。了解更多像素相关知识，能够参考：https://github.com/jawil/blog/issues/21。

4、em

　　em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

　

注意：
一、em 的值并非固定的

　二、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 做为单位就好了

　综上所述，em 做为响应式布局的单位仍旧会有一些问题， 当设置父元素的字体大小后，子元素的 em 就发生了变化，须要进行从新计算，为了解决这个问题便出现了 rem 。

5、rem

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

p {font-size:14px; font-size:.875rem;}
/*
　　注： 选择使用什么字体单位主要由你的项目来决定，若是你的用户群都使用最新版的浏览器，那推荐使用rem，若是要考虑兼容性，那就使用px,或者二者同时使用。

*/

　　浏览器的默认字体大小为 16px , px 与 rem 转换以下：

 

rem 的适配原理　　

动态获取当前视口宽度 width，除以一个固定的数 W（一般取设计稿宽度），获得 rem 的值。表达式为 n = width / W，html{ font-size: n（px）}，此时的 rem = n，
由于 rem 等于根标签的字体大小。

计算：
　　设计稿宽度为 W
　　屏幕宽度为 CW 
　　n（px） = CW / W
　　html {font-size: n(px);} ==> n（px） = 1 rem （例：html: { font-size: 16px;} ==> 1rem = 16px）
　　
　　假设咱们须要计算一个设计稿上测得宽度为 x(px) 的 div 的 rem 值为多少，能够有如下等式：
　　　　x(px) / W = xRem / CW
　==>　xRem = (CW * x(px)) / W
　==>  xRem = (CW / W) * x(px)
　==> xRem = 1rem * x(px)
　假设 x = 20px --> xRem = 20rem
　
注： 可是注意当设计稿宽度 W = 750px 时，n = CW / W 获得的值会很小，浏览器会有最小字体大小为 12px 的限制，所以建议作放大 100 倍处理，即将 html 的字体大小
　　 设置为当前计算值得 100 倍，html{font-size: (CW / W) * 100;}，此时计算 rem 只须要将设计稿尺寸除以 100 便可。

// 适配代码以下
<script type="text/javascript">
    //手机端的适配
    document.addEventListener("DOMContentLoaded",function(){
        document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
    });
     
    window.onresize = function(){
        document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
    }
</script>

 

px 与 rem 的选择？

　　一、对于只须要适配少部分手机设备，且分辨率对页面影响不大的，使用px便可 。

　　二、对于须要适配各类移动设备，使用rem，例如只须要适配iPhone和iPad等分辨率差异比较挺大的设备。

6、结语 

　　好吧，好像没啥要总结的，能坚持别人不能的坚持得，才能拥有别人不能拥有的！致你们及本身。