从上一节我们知道,不同设备的完美视口不一样,所以我们在写宽度长度等数据时,不能再用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>