（1）物理像素=>物理像素只的就是一个小点点
（2）另外一种是css像素=>css像素使我们书写代码的时候书写的单位
>>>浏览器在加载网页的时候，需要将css像素转化成物理像素<<<
默认情况下pc端一个css像素等于一个物理像素
默认情况下移动端的网页都会将980像素css像素，让pc端的网页在移动端也能全部展现出来
最佳像素比设置完美视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">vw是一个视口的宽度。无论视口多大，100vm总是表示整个宽度
1vw = 1%视口宽度
vw永远相对于视口宽度
（pc端相对于旧的浏览器支持不是很好，移动端可以不用担心使用）设计图的宽度一般是750px（2倍图，375）或者1125px（3倍图，375）的案例:
<!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>
*{
padding: 0;
margin: 0;
}
/*设置htmlfont-size的大小，则rem就可以派上用场
假如：设计图是750px大小的要充满整个可视区域也就是100vw
那么1px = 0.1333333333333333vw
*/
html{
/*如果这个设置的话，理论上是可行的但是浏览器默然是字体最小是12px*/
/* font-size:0.1333333333333333vw;*/
/*扩大40倍相当于40px*/
font-size:5.3333333vw
}
.main{
/*vw指的视口大小当值是100vw的时候不同的手机代表着宽度是100%*/
/*上面的设置是1rem = 40px 如果我想屏幕正好视频可以区域750/40*/
width: 18.75rem;
height: 35rem;
background-color: red;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
</html>