rem、px、em(手机端h5页面屏幕适配的几种方法)

px

px像素（pixel）：相对长度单位。相对于显示器屏幕分辨率而言。pc端使用px倒也无所谓，但是在移动端，由于手机分辨率种类颇多，不可能一个个去适配，这时px就显得很是无力，因此就要考虑em和rem。

em

 

相对于父节点的font-size，会有一些组合的问题。好比你把body的font-size定义为50%，通常地会是8px。那么你在body里字体大小就是1em=8px了。可当你定义了一个div，而后把字体设置成了75%，请问，如今的1em等于多少？这个时候你会发现，原来他继承了body的值，如今字体更小了，变成了6px！由于em是相对于父节点的单位。这么嵌套下去你会哭......(幸亏出现了rem╭(′▽`)╭(′▽`)╯)

 

rem

 

相对长度单位，指相对于根元素的字体大小的单位。rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来说，1rem始终会等于8px。使用的时候不须要从新计算rem此时的大小。rem由于是css3增长的，因此ie8或如下请无视。

 

屏幕适配的几种方法（流式布局、固定宽度、响应式、经过viewport进行缩放、使用rem）

流式布局：

         在页面布局的时候都是经过百分比来定义宽度，可是高度大都是用px来固定住，因此在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，可是高度仍是和原来同样，实际显示很是的不协调，这就是流式布局的最致命的缺点，每每只有几个尺寸的手机下看到的效果是使人满意的，其实不少视觉设计师应该没法接受这种效果，由于他们的设计图在大屏幕手机下看到的效果至关因而被横向拉长来同样。 流式布局并非最理想的实现方式，经过大量的百分比布局，会常常出现许多兼容性的问题，还有就是对设计有不少的限制，由于他们在设计之初就须要考虑流式布局对元素形成的影响，只能设计横向拉伸的元素布局，设计的时候存在不少局限性。

 

固定宽度：

       把页面设置成320的宽度，超出部分留白，这样作视觉，前端设计都挺挺开心，UI不再用被流式布局限制本身的设计灵感了，前端也不用流式布局。可是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操做的按钮也很小

。

响应式：

响应式这种方式在国内不多有大型企业的复杂性的网站在移动端用这种方法去作，主要缘由是工做大，维护性

难，因此通常都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，由于这样

反而能够节约成本，不用再专门为本身的网站作一个web app的版本。

 

经过viewport进行缩放：

  以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就能够兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。说实话我以为他和用接下去咱们要讲的rem都很是高效，不过有部分同窗使用过程当中反应缩放会致使有些页面元素会糊的状况。

 

rem等比例适配全部屏幕：

(function(){
    var currClientWidth,
        fontValue,
        originWidth;
    originWidth = 750;//ui设计稿的宽度，通常750或640
    __resize();

    window.addEventListener('resize', __resize, false);

    function __resize() {
        currClientWidth = document.documentElement.clientWidth;
        if (currClientWidth > 768){
            currClientWidth = 768;
        } 
        if (currClientWidth < 320){
            currClientWidth = 320;
        } 
        fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
        document.documentElement.style.fontSize = fontValue + '%';
    }
})();
// 当前假如当前分辨率是375， 设计稿分辨率是750
// 750/375=0.5
// 比例关系是0.5倍
// 再算一下你要换算1rem等于多少px，
// 假如我要100， 100/16=6.25
// 把这个换算的乘以刚才得出的比例
// 0.5*625=312.5
// 最后还拼接了一个百分号 = 312.5%
// 就是在375分辨率下 1rem = 312.5%
// 312.5% * 16px = 50px

     经过js来判断当前屏幕大小，进而设置html的font-size.代码里面rem的值就是Ui设计稿上量的px除以100就是你代码中要写的rem值。