书写移动端网页先调一个合适的像素比
可以通过meta标签来设置视口大小
每一款移动设备设计时，都会有一个最佳像素比
一般我们只需要将像素比设置为该值就可以得到一个最佳效果
将像素比设置为最佳像素比的视口大小我们称其为完美视口
width=device-width
width=device-width, initial-scale=1.0 一个意思，为了保险起见都写
<meta name="viewport" content="width=device-width, initial-scale=1.0">
像素：
在前端开发中像素分为两种：css像素 和 物理像素
浏览器在现实网页时，需要将css像素转换为物理像素然后再呈现
一个css像素由几个物理像素显示，由浏览器决定
默认情况下在pc端，一个像素 = 一个物理像素
视口（viewport）
视口就是屏幕中用来显示网页的区域
可以通过查看视口大小 ，来观察css像素和物理像素的比值
通过改变视口大小来改变像素比值
vw
移动端开发中，就不能用px了
vw 表示视口的宽度（viewport widyh）
- 100vw = 一个视口的宽度
- 1vw = 1%视口宽度
这个单位永远相对于视口宽度计算，所以往往是将 px 和 vw 进行换算
适配
设计稿宽度是750px。盒子宽120px，高40px。
则高为120px/750px*100vw = 16vw
则宽为40px/750px*100vw = 0.5333333vw
开发中一般采用：
100px/750vw= 0.13333333333333333 vw/px（1px 为0.13333333333333333 vw）
0.13333333333333333 vw/px*40px = 5.333 vw（由于字体大小最小只能设置12px,所以扩大40倍，即 40px 5.333vw）
设置 根元素html字体大小为 font-size: 5.33333vw; 此时利用rem单位（相对于根元素大小）
此时40px为5.333vw
此时计算宽高：
宽 (120px/40px) = 3rem
高 (40px/40px) = 1rem
手机像素
在不同屏幕下，单位像素的大小不同，像素越小屏幕越清晰，手机像素点远小于计算机像素
默认情况下，移动端的网页都会将视口设置为980像素（css像素）
以确保pc端网页可以在移动端正常访问,但是如果网页的宽度超过980像素，移动端会自动缩放以显示全
所以大部分pc端网页都会在移动端中正常浏览，但往往体验感都不好
为了解决这个问题，往往给移动端重新设计个网页
像素参考网站
https://material.io/resources/devices/
