H5适配解决方案

1.H5适配解决方案

1.1 百分比

%

缺点：相对于父级width

1.2 em和rem

em:相对于父级元素的font-size

rem:相对于根字号，也就是html根标签的font-size

1.3 媒体查询

@media (max-width: 12450px) { 
  
   //css样式
}

1.4 flex布局

思考一下：flex布局与响应式布局的区别？

flex:不会破坏布局结构

flex:1 1 1
响应式布局：会破坏布局，改变显示的内容，重要内容优先显示，其他内容可能放在下面或显隐藏掉

https://www.ruanyifeng.com/blog/2015/07/flex-examples.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

1.5 vw,vh,vmax,vmin

vw:动态根据当前屏幕可视区的宽度  1vw相当于可视区宽度的1%
vh:动态根据当前屏幕可视区的高度   1vh相当于可视区高度的1%
vmax:动态根据当前屏幕可视区的宽度和高度选取取最大者    1vmax相当于可视区宽度和高度选取取最大者 的1%
vmin:动态根据当前屏幕可视区的宽度和高度选取取最小者    1vmmin相当于可视区宽度和高度选取取最小者 的1%

1.6适配在项目中的解决方案

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