各种方案

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-sizevar 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。