vw单位——CSS

_洋

已于 2022-07-31 17:50:49 修改

阅读量2.6k

点赞数 2

分类专栏： HTML+CSS 文章标签： css3

于 2022-04-19 15:21:44 首次发布

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124270492

版权

HTML+CSS 专栏收录该内容

38 篇文章

订阅专栏

文章目录

vw的引入
vw
补充：2倍图
px和vw的转换

vw的引入

不同的设备完美视口的大小是不一样的，eg：
iphone6 – 375
iphone6plus – 414
由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，比如在iphone6中375就是全屏，而到了plus中375就会缺一块，不能适配所有移动设备。

所以在移动端开发时，就不能再使用px来进行布局了，这就引入了vw。

vw

vw表示的是视口的宽度（viewport width)。
视口就是当前窗口所显示的css像素大小。

100vw =一个视口的宽度
1vw =1%视口宽度
vw这个单位永远相当于视口宽度进行计算。
即如果视口宽度是100px，则1vw = 1px；
即如果视口宽度是200px，则1vw = 2px；

补充：2倍图

为了显示的大小正好，经常使用 css像素 / 物理像素 = 0.5，这样就导致1个css像素被放大成 2 个物理像素就会导致图片显示不清晰，所以我们设计的图片一般情况下宽度都是正常宽度的2倍，为放大使用的。
eg： 375px的视口，如果想要图片占满屏幕图片一般设计成750px的。

px和vw的转换

我们的设计参考图是以px为单位，如果设计的是移动端样式，需要将px转换成vw。

法一：直接计算
iphone6 的视口是 375px，一般设计图是 750px。

所以有 100vw=750px；（按设计图的尺寸来，而不是375px）
1px = 0.13333333vw;
npx就表示成 n*0.13333333vw;

法二：利用rem进行存储，简化写法
即可以设置html的字体大小为以vw为单位的1px，之后再使用vw表示 n px的时候直接使用 n rem；表示。
但是需要注意的一点是，浏览器允许的最小字体大小是12px，如果<12px,font-size还是会按12px处理的，所以我们可以设置成 1 rem = 100px的 vw 大小(当然也可以不设置成100px,可以设置成任何>12px的vw大小)

按上面的例子：
1px = 0.13333333vw;
100px = 13.33333 vw;
如果要表示 750px , 就可以表示成 7.5 rem。
eg：

<!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>
        html{
            font-size: 13.3333vw;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 7.5rem;
            height: 100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    
</body>
</html>