移动端适配

移动端适配的几种方案：

rem方案
rem+vw方案
百分比
基于媒体查询的响应式设计

rem方案的原理：
rem是相对长度单位，相对html元素（文档根元素doucment.documentElement）计算值的倍数。根据屏幕宽度设置html标签的font-size，在布局时使用rem单位，达到自适应的目的，是弹性布局的一种实现方式。
当页面全屏显示时，设置 html 默认字体大小为100px，则子元素中1rem就等于100px，相当于设计稿中的1px等于0.01rem，使用的时候设计稿中的尺寸直接除以100，100px就是1rem，10px就是0.1rem。

PC端

export default class Rem {
    static init(){
    	//设置默认尺寸
        Rem.defaultStyle();
        //缩放后，重新计算html字体大小
        Rem.resizeHandler();
        //监听浏览器缩放事件
        window.addEventListener("resize", Rem.resizeHandler);
    }
    //计算html字体大小
    static resizeHandler() {
        let contW = Math.floor(document.documentElement.clientWidth);
        let fontS = (contW / screen.width) * 100;
        document.documentElement.style.fontSize = fontS + "px";
    }
    //设置html默认字体为100px body字体为16px
    static defaultStyle(){
        document.documentElement.style.fontSize = "100px";
        document.body.style.fontSize = "16px";
    }
    //px 转换成 rem
    static getRem(size) {
        var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
        return size / fontSize;
    }
}

移动端

(function(w){
    var docEl=w.document.documentElement;
    var timer;

    function refersh(){
      var width=docEl.getBoundingClientRect().width;
      if(width>750) width=750;
      var rem = width/7.5;
      docEl.style.fontSize=rem+"px";
    }

    w.addEventListener("resize",function(){
      timer && clearTimeout(timer);
      timer=setTimeout(refersh,400)
    })

    w.addEventListener('pageshow', function () {
      timer && clearTimeout(timer);
      timer = setTimeout(refersh, 400)
    })

  })(window)

rem+vw方案

vw/vh方案计算方便，能够很好地实现适配效果，但是存在一定的兼容问题，将vw/vh方案和rem方案相结合，设置html元素的font-size单位为vw，然后在布局中直接使用rem单位。

例如，设计稿的宽度为750px，则1vw=7.5px，为了方便计算，我们将html元素的font-size大小设置为100px，也就是13.333vw=100px。

html{font-size:13.333vw}
1
设置html{font-size:13.333vw}，在样式代码中1rem=13.333vw=100px，即1rem等于设计稿上的100px，使用的时候除以100，直接小数点向左移动2位，1rem等于100px，那么10px就是0.1rem。

这样的好处是不需要使用postcss-pxtorem 插件来转换单位，如果使用插件，想写px的地方还需要设置propList或者selectorBlackList。使用这种方案的话就不存在这个问题了，想用相对单位就写rem，想用绝对单位就写px，不需要其他的设置。

这种方案的优点：从rem方案过渡到vw，只是需要通过改变根元素字体大小的计算方式，将单位改成vw，不需要其他处理。

这种方案的缺点：，这种方案只对手机的兼容性很好，ipad或者是pc端的效果就不是很好。因为根节点的字体单位使用的是vw，当设备的宽度越来越大时，使用rem做单位的元素也会越来越大，以至于在ipad或者是pc上展示的效果会很差。

解决方案：当屏幕过大的时候，我们可以使用媒体查询来限制根元素的字体大小，实现对页面的最大最小宽度限制。

例如，在样式中加上这句代码，在pc上效果也很不错了。

@media (min-width: 560px) {
html {
font-size: 54px;
}
}

.百分比方案

相对于父元素的宽度，使用百分比的单位来定义子元素的宽度。子元素的高度使用px来定义，使用max-width/min-width 控制子元素的最大最小尺寸。

属性 参考对象
height/width 相对于子元素的直接父元素
top/bottom/left/right 相对于有定位属性的父元素
padding/margin 相对于直接父元素
border-radius 相对于自身
这种方式的优点是原理简单，不存在兼容性问题。

缺点是

字体大小无法随着屏幕大小变化而改变；
设置盒模型的不同属性时，其百分比设置的参考元素不唯一，容易使布局问题变得复杂。

基于媒体查询的响应式设计

基于媒体查询的响应式设计，响应式设计，使得一个网站可以同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器）而变化，使其视觉合理，交互方式符合习惯。

css3中的@media，通过给不同分辨率的设备编写不同的样式规则实现响应式布局，使一个网站可以在不同尺寸的屏幕下显示不同的布局效果。主要用来解决不同设置不同分辨率之间的兼容问题，一般是指pc、平板、手机设备之间较大的分辨率差异。实现上不局限于具体的方案，通常是结合流式布局和弹性布局方案。比如给小屏幕手机设置@2x图，给大屏手机设置@3x图。

@media only screen and (min-width: 375px){
/样式1/
}
@media only screen and (min-width: 750){
/样式2/
}
1
2
3
4
5
6
这种方案的优点是

能够使网页在不同设备、不同分辨率的屏幕上呈现合理布局，不单单是样式伸缩变换。
缺点是

如果要匹配足够多的设备与屏幕，一个web页面需要多个设计方案，工作量比较大。
通过媒体查询技术需要设置一定量的断点，到达某个断点前后的页面发生突兀变化，用户体验不太友好。