像素
<!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>
</head>
<style>
.box1{
width: 100px;
height: 100px;
}
</style>
<body>
<!--
像素
屏幕是由一个一个发光的小点构成,这一个个的小点就是像素
分辨率,1920*680 就是像素的数量
--物理像素 上述所说的小点就是物理像素
--CSS像素,编写网页时,我们所用的像素都是CSS像素
浏览器显示网页时,需要将css像素转化为物理像素再呈现
一个css像素最终由几个物理像素显示,由浏览器绝对
默认情况下,在PC端,一个css像素=一个物理像素
视口(viewport)
就是屏幕中用来显示网页的区域
可以通过查看视口的大小来观察两个像素的比值
默认情况下,视口的宽度是1536像素(css)
-->
<div class="box1"></div>
</body>
</html>
视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置视口大小 device-width表示设备的宽度(完美视口) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<!-- 移动端默认的视口大小是980px(css)
默认情况下,移动端的像素比就是 移动端宽度/设置的值=最佳视口
(分辨率越高,像素比越小?)物理/css?
如果我们直接在网页中编写移动端代码,这样在980视口下,
像素比非常不好,导致网页中的内容非常非常小
编写页面时,必须确保有一个合理的像素比
1 css对应 2/3个物理像素
通过meta标签设置视口大小
每一款设备都有一个最佳的像素比,我们只需要将像素比设置为该值即可
material.io/resources/devices
完美视口:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-->
<div class="box1"></div>
</body>
</html>
vw
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width:6.4vw;
height: 4.667vw;
background-color: aliceblue;
}
</style>
<body>
<!-- 不同的设备完美视口大小不一样
设计图的宽度 750/1125px
、
创建一个48*35大小的元素
100vw=750px(设计图的像素)
?vw=48px=6.4vw
4.667vw=35px
-->
<div class="box1"></div>
</body>
</html>