前端适配

什么是适配

chrome 最小字体：12px，默认字体：16px

rem 单位：参照于根元素 html 的 font-size 值

适配：就是让网页在各种不同尺寸的移动设备上，都能百分之百的按相同比例还原设计图

rem 适配方案

   

       

       

       

       

       

   

   

       

       

    

本质：将页面元素的尺寸跟布局视口的尺寸通过 rem 关联起来，不同的设备 rem 对应的像素值不一样，这样就实现了等比例

优点：使用了完美视口，太大的元素也能完好的显示在页面，不会被缩放；图片失真的情况不严重（因为一般的设计图基于 iPhone 6 都是 750px 的宽度）

缺点：页面上的每一个元素都要从 px 单位转换为 rem，计算过程比较复杂（后面用 LESS 自动计算）

viewport 适配方案

同上，把（function(){}）（）替换

(function () {

      const targetLayoutWidth = 320,

            currentLayoutWidth = document.documentElement.clientWidth,

            scale = currentLayoutWidth / targetLayoutWidth,

            metaNode = document.querySelector('meta[name="viewport"]')

      metaNode.setAttribute('content', 'initial-scale=' + scale + ', user-scalable=no')

    })()

本质：将页面的布局视口尺寸设置（缩放）为设计图的尺寸（一般为 320px），这样设计图跟布局视口一比一对应，页面中的元素尺寸就跟设计图中标注的尺寸一致，所以不用管设备的尺寸即可以实现等比例

优点：设计图所见即所得

缺点：由于布局视口缩放（一般是放大操作）后，它的像素个数会变少，这时如果在 meta 里写上 width="device-width" 的话，由于理想视口的像素比较多，所以布局视口会取理想视口的像素值。所以这时不能写这句话，但这样的话就无法实现完美视口了，页面中如果有太大的元素，就会被自动缩放，而不会出现滚动条

心情不太愉快，不写了。事件点透之类的下次来在写