适配

在前端开发过程中，我们或多或少都会遇到多端适配，或者也不用多端，不同手机的屏幕比和dpr就有着极大的渲染难度，所以特此写下这篇文章来实现多端适配

传统的仅移动端适配的方案 1rem = 100px

// 在css全局中
html{
font-size:calc(100vw / 750 *100);
}
body{
font-size: 12px;
}
//或者也可以用js控制页面最开始写一个函数并执行
var fun=function(doc,win){
var docEl=doc.documentElement;//获取html
var recalc=function(){
var clientWidth=docEl.clientWidth;
if(!clientWidth)return;//页面不可见
docEl.style.fontSize=(clientWidth / 750)*100 + "px";
}
if(!doc.addEventListener)return;确保支持DOM2级事件
win.addEventListener('resize',recalc,false);//屏幕大小改变时触发一次
doc.addEventListener('DOMContentLoaded',recalc,false)//html加载解析完毕后触发一次
}
fun(document,window)

进阶的实现方式 lib-flexible+postcss（目前最常见的适配方案）

 上述方案对不同端还是有一定的差别的，而且在不同dpr尤其那些高清屏的dpr不同的客户端中展示的模糊于清晰也有一定的影响所以采用阿里的写好的一个适配方案再结合postcss后处理转换rem和添加不同内核达到刚好的展示效果

lib-flexible是开源的一个移动端适配项目，其中会根据不同的dpr为html的fontsize设置对应的值，会在屏幕放大，缩小，旋转时进行重新计算，不过因为是移动端适配，所以在代码中不考虑dpr最多会适配到540px，多出部分以540px的宽度看待。如果有更多需要，可以修改这里的相关代码进行使用。优点是可以读取页面的信息元信息，可以适配安卓和ios系统计算dpr，可以针对用户的操作进行重新计算等等。

//第一步下包并引入lib-flexible在入口文件之中
//第二步下载postcss-pxtorem并书写配置文件postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {//提供并添加各种浏览器的前缀
      overrideBrowserslist: [//浏览器
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
      ],
    },
    "postcss-pxtorem": {//适配
      rootValue: 37.5,//设计稿十分之一(根元素html的fontsize值)
      propList: ["*"],//要转换rem单位的list，如果只需指定的样式转换可以自行配置
    },
  },
};

特殊情况

 在上述的情况下，有可能会出现满屏操作宽屏窄屏的效果不是特别理想，然后我们就可以copy一下代码改一下源代码的操作，把refreshRem的函数改变一下调整调整我们的展示形式

//大致在代码78行的refreshRem函数中修改
    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
//在此处针对大于540px大小的屏幕设置不同的期望值即可
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }