像素
屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
分辨率：1920 x 1080 说的就是屏幕中小点的数量
在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素
物理像素
上述所说的小点点就属于物理像素
CSS像素
编写网页时，我们所用像素都是CSS像素
浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
一个css像素最终由几个物理像素显示，由浏览器决定：
默认情况下在pc端，一个css像素 = 一个物理像素
笔记本很大可能的情况是因为设置了缩放，所以看起来不等
视口（viewport）
视口就是屏幕中用来显示网页的区域
可以通过查看视口的大小，来观察CSS像素和物理像素的比值
默认情况下：
视口宽度：
1920px（CSS像素）1920px（物理像素）
此时，css像素和物理像素的比是 1:1
放大两倍的情况：
视口宽度：
960px（CSS像素）1920px（物理像素）
此时，css像素和物理像素的比是1:2
我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值
移动端
在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
24寸 1920x1080
i6 4.7寸 750 x 1334
智能手机的像素点 远远小于 计算机的像素点
问题：一个宽度为900px的网页在iphone6中要如何显示呢？
默认情况下，移动端的网页都会将视口设置为980像素（css像素）
以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980
移动端的浏览器会自动对网页缩放以完整显示网页
查询移动端分辨率 https://material.io/resources/devices/
所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验
为了解决这个问题，大部分网站都会专门为移动端设计网页
移动端页面
移动端默认的视口大小是980px(css像素)
默认情况下，移动端的像素比就是 980/移动端宽度 （980/750）
如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好
导致网页中的内容非常非常的小
编写移动页面时，必须要确保有一个比较合理的像素比：
1css像素 对应 2个物理像素
1css像素 对应 3个物理像素
可以通过meta标签来设置视口大小
每一款移动设备设计时，都会有一个最佳的像素比
一般我们只需要将像素比设置为该值即可得到一个最佳效果
将像素比设置为最佳像素比的视口大小我们称其为完美视口
将网页的视口设置为完美视口
结论：以后再写移动端的页面，就把上边这个玩意先写上
视口
不同的设备完美视口的大小是不一样的
iphone6 -- 375
iphone6plus -- 414
所以在移动端开发时，就不能再使用px来进行布局了
vw 表示的是视口的宽度（viewport width）
100vw = 1个视口的宽度
1vw = 1%视口宽度
vw 这个单位永远相当于视口宽度进行计算
创建一个 48px x 35px 大小的元素
100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px
6.4vw = 48px(设计图像素)
4.667vw = 35px
vw 适配
我们可以设置 rem 来方便使用 vw 单位
网页中字体大小最小是12px，不能设置一个比12像素还小的字体
如果我们设置了一个小于12px的字体，则字体自动设置为12px
0.1333333vw = 1px （100/750）
5.3333vw = 40px
html{
font-size: 5.3333vw;
}
.box1{
/*
rem
- 1 rem = 1 html的字体大小
- 1 rem = 40 px(设计图)
*/
1.2rem;
height: 0.875rem;
background-color: #bfa;
}
