6. 移动端适配vw方案
2022-10-10 本文已影响0人
未路过
1.vw和rem的对比
◼ rem事实上是作为一种过渡的方案，它利用的也是vw的思想。
- 前面不管是我们自己编写的js，还是flexible的源码；
- 都是将1rem等同于设计稿的1/10，在利用1rem计算相对于整个屏幕的尺寸大小；
- 那么我们来思考，1vw不是刚好等于屏幕（视口宽度）的1/100吗？
-
而且相对于rem还更加有优势
5.兼容性
在caniuse上面搜viewport，发现vw的兼容性很好了，ie9 10 11加浏览器前缀就可以了。
image.png
2. vw相比于rem的优势：
- 优势一：不需要去计算html的font-size大小，也不需要给html设置这样一个font-size；
- 优势二：不会因为设置html的font-size大小，而必须给body再设置一个font-size，防止继承；
- 优势三：因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被篡改，页面尺寸混乱；
- 优势四：vw相比于rem更加语义化，1vw刚才是1/100的viewport的大小;
- 优势五：可以具备rem之前所有的优点；
vw我们只面临一个问题，将尺寸换算成vw的单位即可；所以，目前相比于rem，更加推荐大家使用vw（但是理解rem依然很重要）
缺点就是当屏幕特别大，我们一直都是vw，相对于视口，这个时候是不能做限制的，但是rem的话，可以使用媒体查询，设置屏幕最大值的时候的html的字体大小。最大限度的放大和缩小的时候使用rem。
3. vw的单位换算
- 方案一：手动换算
- 比如有一个在375px屏幕上，100px宽度和高度的盒子；
- 我们需要将100px转成对应的vw值；
- 100/3.75=26.667，其他也是相同的方法计算即可；
26就是相对于哦屏幕宽度的百分之26！直接能知道意思，不需要再思考html的字体大小。
<!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>
/* 设置给375px的设计稿 */
/* 1vw = 3.75px */
.box {
width: 26.6667vw;
height: 26.6667vw;
background-color: orange;
}
p {
font-size: 3.733333vw;
}
</style>
</head>
<body>
<div class="box"></div>
<p>我是文本</p>
</body>
</html>
-
方案二：less/scss函数
image.png
-
方案三：postcss-px-to-viewport-8-plugin（后续学习）
和rem一样，在前端的工程化开发中，我们可以借助于webpack的工具来完成自动的转化； -
VSCode插件
px to vw 的插件，在编写时自动转化；
image.png
修改这个值
image.png
375的设计稿的化，就改成375
