.H5适配解决方案

Posted 2021-06-10 ```飞翔的翅膀```

1.根据屏幕宽度除以10,将每份的宽度做为html根字号
2.引入一个适配的js，通常叫rem.js来实现动态改变html根字号
3.根据编辑器不同，安装内置适配插件
4.使用sass封装一个适配方法，将你的Px值传入这个适配方法中，自动计算出rem
5.利用postcss 实现适配

2和5方案结合使用

要计算的rem=目标px/html根字号

6rem=300px/100

postcss-px2vw

1.postcss-px2vw:

该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能，精简了不常用的配置。默认将 vw 作为优先单位使用，以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem，这款插件很好的解决了该问题。

postcss-px2vw插件地址：https://www.npmjs.com/package/@moohng/postcss-px2vw

2.postcss-pxtorem 和lib-flexible处理适配
使用方法参考地址：
https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage#liu-lan-qi-gua-pei

  创建配置文件：postcss.config.js

module.exports = {
plugins: {
“postcss-pxtorem”: {
rootValue:100, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
propList: [""], //是一个存储哪些将被转换的属性列表，这里设置为[’’]全部，假设需要仅对边框进行设置，可以写[’’, '!border’]

  },
},

};

报错解决方案：
https://blog.csdn.net/m0_47965154/article/details/115380574

最终安装步骤：
1.第二步：安装postcs和postcss-pxtorem

 npm i postcss postcss-pxtorem@5.1.1  --save-dev

2.第二步：在项目的根目录下创建postcss.config.js文件，并写入下面的配置

 module.exports = {
    plugins: {
      "postcss-pxtorem": {
        rootValue:75,//根字号
        propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']

      },
    },
  };

3.第三步：引入rem.js，rem.js中的代码如下：

(function (doc,  win)  {    
//获取html标签
var  docEl  =  doc.documentElement,
        resizeEvt  =  ‘orientationchange’  in  window  ?  ‘orientationchange’  :  ‘resize’,
//根据横竖屏和屏幕尺寸的改变来动态设置html根字号的函数
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 75 * (clientWidth / 750) + ‘px’;
document.body.style.fontSize=“24px”
 
};
    
if (!doc.addEventListener) return;

//监听横竖屏和屏幕尺寸改变的事件 
win.addEventListener(resizeEvt, recalc, false);

//加载后立即执行 
doc.addEventListener('DOMContentLoaded',  recalc,  false);

})(document,  window);

4.第四步：在测量元素尺寸时，是多少px就写多少px

.btn {
width:150px;
height:50px;
background: #ccc;
border: none;
}