移动端h5适配方案：媒体查询、编写js、lib-flexible、vw、rem和vw单位换算

各种方案

1）百分比设置（X）【百分比很难统一，不推荐】
2）rem单位+动态html的font-size
3）vw单位
4）flex弹性布局

推荐的是第二种和第三种，更推荐第三种

第二种：动态设置html的font-size

我们都知道，rem是根据html节点的font-size进行换算的。1rem=[html的font-size]

媒体查询@media

    @media (min-width: 1500px) {
        :root {
            font-size: 1em;
        }

        .layout {
            height: 80%;
        }
    }

js

也可以引入ib-flexible.js库

/*
 * @Description: 实时计算font-size
 * @Author: Conquer Byte
 * @ModifyAuthor: Dai
 * @Date: 2024-05-23 19:33:27
 * @LastEditTime:
 */

//js动态变化html 的 font-size

var htmlEl = document.documentElement; // 获取html的元素
var dpr = window.devicePixelRatio || 1; //获取像素比例

// adjust body font size
function setBodyFontSize() {
  if (document.body) {
    document.body.style.fontSize = 12 * dpr + "px";
  } else {
    document.addEventListener("DOMContentLoaded", setBodyFontSize);
  }
}
setBodyFontSize();

function setRem() {
  const width = htmlEl.clientWidth; //获取视口的宽度
  const htmlFontSize = width / 10; // 根据宽度计算html的font-size的大小
  htmlEl.style.fontSize = htmlFontSize + "px"; // 将font-size设置到html上
}

setRem(); //第一次执行

window.addEventListener("resize", setRem); // 监听resize

// 当一条历史会话被执行的时候触发
window.addEventListener("pageshow", (e) => {
  // 如果页面来自缓存
  if (e.persisted) {
    setRem();
  }
});

第三种：vw方案

class{
    /*1%的视口宽度*/
	font-size: 1vw; 
	/*10%的视口宽度*/
	width: 10vw;
}

rem、vw单位换算

手动根据设计稿进行计算

设计稿宽度：750px
html[fon-size]：75px
设计稿盒子宽度100px
代码宽度：
rem：100/75 rem
vw：100/750 vw

less

@clientWith: 750
@pxToRem(@px){
	result:@px / @clientWidth / 10 + 'px'
}

vs code 插件

px to rem & rpx & vw (cssrem)

设置根节点font-size、设计稿宽度和启用vw

插件根据设定的设计稿的宽度（默认750px,html:font-size为75px）进行计算。10px = 10/750*100vw = 10/75rem。