思路：vw+rem,已知1rem=1根元素的font-size;1vw=1%视口宽度；当根元素使用vw时，其他元素尺寸、字体大小均使用rem时，此时尺寸根据视口宽度变化而变化；达到适配目的。
以font-size:1vw，设计图750，为例：
1rem=1vw 1vw=7.5px 1rem=7.5px 1px=10/75rem=2/15rem=0.1333rem;
1.设置根元素：
根元素使用vw,例如：
html:{
font-size:1vw
}
2.设置物体尺寸：
物体尺寸 假设设计图中为250px;转换为rem即为250*（2/15）=33.33rem
.box{width:33.33rem;height:33.33rem;}
<div class="box"></div>
3.px转rem:
一个个算比较麻烦，有两个建议：
1.vscode使用px to rem,输入固定比例，自动计算；
2.此时根元素为1vw所以需要*2/15，修改根元素font-size,使其达到可以口算的比例；
4.缺点：
实际转化过程，可能有除不尽的数，可能有0.0几px的误差，不是特别精密的项目可以忽略不计
5.例子：.box一直为视口宽度的1/3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;margin:0
}
html{
font-size: 1vw;
}
.box{
width:33.33rem;height:33.33rem;
background:red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>```
1974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
