移动端开发—rem

首先介绍一下rem、px、em、百分比开发网页的特点

• px最常用的开发方式，对应各终端始终显示的是大小始终一样；所以不能够实现各终端自适应效果；
• 百分比可以结合px来实现对自适应要求不是特别高的网站开发；不能够完全实现自适应，因为百分比是相对于父级来计算的，并且会受padding影响；而且高度百分比不容易计算；所以不适合自适应要求高的网站开发；
• em是相对于父级来计算的，对于父级嵌套的元素来说很难计算其具体值；很容易计算错误；
• 媒询需要去配置各个尺寸的样式，开发难度比较大，适合一些简单的项目开发；
• rem是相对于根元素html来计算的，不依赖于父级，所有值的计算只需要基于根元素html,所以计算简单，不受其他因素影响，是目前最好的多终端适配开发解决方案

rem开发网页的具体实施

（1）第一步：设置根元素html的font-size

方案1：在页面头部插入一段JS。 //为什么是头部？–防止页面闪烁

(function() {
    var newRem = function() {
        var html = document.documentElement;
        html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px';
    };
    window.addEventListener('resize', newRem, false);
    newRem();
})();

方案2：在css文件中增加媒体查询

@media (min-width: 320px){html{font-size: 32px;} }
@media (min-width: 360px){html{font-size: 36px;} }
@media (min-width: 375px){html{font-size: 37.5px;} }
@media (min-width: 384px){html{font-size: 38.5px;} }
@media (min-width: 414px){html{font-size: 41.4px;} }
@media (min-width: 448px){html{font-size: 44.8px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 51.2px;} }
@media (min-width: 544px){html{font-size: 54.4px;} }
@media (min-width: 576px){html{font-size: 57.6px;} }
@media (min-width: 608px){html{font-size: 60.8px;} }
@media (min-width: 640px){html{font-size: 64px;} }
@media (min-width: 750px){html{font-size: 75px;} }
@media (min-width: 800px){html{font-size: 80px;} }
@media (min-width: 1024px){html{font-size: 102.4px;} }

（2）第二步：计算各元素的具体值

例如：如果设计稿宽度是750px;则此时在750px设备上设置的html的font-size则为75px;屏幕尺寸则为10rem(750/75);则同样的；

12px <=> 12/75 <=> 0.16rem
750px <=> 750/75 <=> 10rem // 也即100% 全屏宽度

则：按照设计稿计算出各个元素尺寸后；随着设备尺寸变化，根元素html对应的font-size也自动改变，相对于根元素计算出的各个元素的尺寸也就自东改变了