前端学习笔记98-vw单位

最新推荐文章于 2022-04-19 15:21:44 发布

小欣CZX

最新推荐文章于 2022-04-19 15:21:44 发布

阅读量187

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/117106300

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

本文讲解了如何使用vw单位进行响应式设计，介绍vw与设计图的关系，并通过实例演示如何将设计图上的48px*35px元素转换为vw单位。重点在于理解vw与750px设计图的对应关系，确保在不同设备上保持一致的视觉效果。

摘要由CSDN通过智能技术生成

从上一节我们知道，不同设备的完美视口不一样，所以我们在写宽度长度等数据时，不能再用px来做单位，因为它和不同设备的device-width比值是不同的，显示出来就不同了，所以我们要换一个单位，这个单位要相对于device-width比值不变。

vw

100vw为viewport width，所以看下面的代码：

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 50vw;
            height: 50vw;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述
可以换换设备，效果一样。

设计图宽度

常见的设计图宽度为750px 、1125px。
这里的750px是因为很多iphone手机的宽度是750，比较早且常见，所以设计图很多是750px。

vw与设计图

根据上面的内容，我们设计图是750px（不是375，375是视口，750是我们拿到手的设计图，里面宽度是750）
有等式：100vw=750px。
如果设计图里有个48px*35px的div，要如何实现它？

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 6.4vw;
            height: 4.667vw;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

小欣CZX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习笔记98-vw单位

前端学习笔记98-vw单位vw设计图宽度vw与设计图从上一节我们知道，不同设备的完美视口不一样，所以我们在写宽度长度等数据时，不能再用px来做单位，因为它和不同设备的device-width比值是不同的，显示出来就不同了，所以我们要换一个单位，这个单位要相对于device-width比值不变。vw100vw为viewport width，所以看下面的代码：<!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫