像素：
屏幕是由一个一个小方格组成的，这些小方格就是像素
分辨率：1920 * 1080 (横向 有1920个物理像素，纵向 有1080个物理像素)
css像素： 我们平时在写网页时，用到的就是css像素
浏览器最终在渲染网页的时候，会将css像素转换成物理像素
一个css像素最终显示几个物理像素 是由浏览器或者系统决定的
默认在PC端 一个css像素等于一个物理像素
视口：
浏览器中显示网页的区域
可以通过查看html视口的大小 来观察 css像素 和 物理像素的比值
假设视口宽度为：
1920px（css像素）,
物理像素则为 1920
css与物理像素的比值为 1 ：1
如果把浏览器页面放大到200%，视口宽度则是 960 px，物理像素还是 1920，此时 一个css像素对应两个物理像素 ，1：2
为了让pc端网页可以在移动端显示完整，移动端默认视口为 980px，如果pc端网页超过980px，移动端浏览器则会自动缩放到980px，以便完整显示整个网页内容。
默认情况下，移动端像素比为 980 / 750
如果直接按照这个比例，去写移动端页面，将会导致页面呈现的内容非常小，因为在这个比例下 1 个css 像素 对应 0.xxx 个物理像素，所以我们需要找到一个合适的比例去书写并且能够适配移动端的页面。
我们可以通过 设置meta标签 来调整视口大小，从而间接改变 css像素 与 设备物理像素的比值
VW像素单位
不同设备的完美布局视口是不同的
iPhone 6 375
iPhone 6 plus 414
如果 设置一个 375 px 的盒子。在 iphone6 会显示完整，在iPhone 6 plus 会显示不完整。
由于不同的设备视口以及像素比不同，所以同样的 375px 在不同的设备下 渲染的区域大小是不同的。
所以在移动端开发时，不可以使用 px 来进行布局
这里需要注意： 如果用百分比来解决的话，由于百分比的参照物不同，最终在设置元素大小的时候会出问题
例如：在一个多层嵌套的盒子中，最外面的盒子设置 20%，可是子盒子我想要铺满整个屏幕，这个时候 因为子盒子的百分比参照物是父盒子，如果给子盒子设置 100%的话，最终渲染出来的子盒子大小是和父盒子一样大的。（20%）
也就是说 百分比的参照物是随时可以变化的。 那我们就需要找到一个固定的参照物
这里就需要用到 VW （**vw始终是针对视口宽度来进行计算的**）
**VW 表示视口的宽度**
100VW = 整个视口的宽度
例： 设置100VW
在iPhone6 显示 375px
iPhone 6 plus 显示 414px
假设 设计图宽度为 750px
需求：创建一个 48px * 35px 大小的元素
100VW = 750px（设计图宽度）
0.1333333333333333VW = 1px
6.4VW = 48px（设计图大小）
4.667VW = 35px（设计图大小）
VW适配方案
以后我们在做移动端适配时，只需要用设计图的像素 乘以 0.1333...（为了计算方便，可以利用css预处理工具 less 或者 sass），但是李立超老师又提供了另一种解决方案，那就是 rem
rem 单位
1rem = 1 html字体大小
例： 设置html 字体大小是 100px
1rem = 100px
2rem = 200px
...
利用rem始终是相对于根元素的字体大小来计算的，可以给根元素设置 一个合适的VW值，子元素直接设置 rem 值即可。
例： 设置根元素字体小为 0.1333VW...
子元素
width 设置为 48rem
height 设置为 35rem
我们预期浏览器会显示我们想要的结果，可是打开浏览器却发现子元素宽高远远超出了我们最初要设置的值。
这个时候，我们可以审查元素，查看元素最终被计算后（computed）的样式
可以发现，html字体大小已经不是我们原先设置的值，它被浏览器自动设置成了 12px，这是因为浏览器最小支持的字体大小为 0 或 12px 以上。
解决浏览器最小支持字体大小的方案：
直接把html字体大小 扩大40倍（0.13333 * 40） 设置为 5.333VW
5.333VW = 40px
1rem = 40px（设计图大小）
**最终设置元素大小的时候，缩小 40 倍，设置为rem值即可**