关于PX
CSS中有非常多的长度单位
整体可以分成两类：
绝对长度单位（Absolute length units）；
相对长度单位（Relative length units）；
px（绝对长度单位）
像素是影响显示的基本单位。（比如屏幕上看到的画面、一幅图片）；
pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel；
“像素”表示“画像元素”之意，有时亦被称为pel（picture element）；
我们经常说一个电脑的分辨率、手机的分辨率，还有CSS当中的像素又是什么关系呢？
像素单位常见的有三种像素名称：
- 设备像素（也称之为物理像素）；
- 设备独立像素（也称之为逻辑像素）；
- CSS像素；
设备像素，也叫物理像素。
- 设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了；
- 我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小；
- 比如iPhone X的分辨率 1125x2436，指的就是设备像素；
设备独立像素，也叫逻辑像素。
- 如果面向开发者，使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的；
- 开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发；
- 所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念；
- 比如你购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论你购买的是2k、4k的显示器，对于开发者来说，都是 1920x1080的大小。
CSS像素
- CSS中我们经常使用的单位也是pixel，它在默认情况下等同于设备独立像素（也就是逻辑像素）；
- 逻辑像素面向开发者；
我们可以通过JavaScript中的screen.width和screen.height获取到电脑的逻辑分辨率：
DPR：device pixel ratio
2010年，iPhone4问世，不仅仅带来了移动互联网，还带来了Retina屏幕；
Retina屏幕翻译为视网膜显示屏，可以为用户带来更好的显示；
在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比（device pixel ratio）；
可以通过window.devicePixelRatio获取到当前屏幕上的DPR值；
PPI：每英寸像素（英语：Pixels Per Inch，缩写：PPI）
通常用来表示一个打印图像或者显示器上像素的密度；
1英寸=2.54厘米，在工业领域被广泛应用；
问题考点——响应式
1.rem是什么？
em是一个相对长度单位，相对于父元素
rem也是一个相对长度单位，相对于根元素，常用于响应式布局
（rem：r’是“root”的缩写，相对于根元素<html>的字体大小。）
rem与其他长度单位的区别
- px，绝对长度单位，最常用
- em，相对长度单位，相对于父元素，不常用（相对于父元素，各个元素的父元素不一，没有统一标准）
- rem，相对长度单位，相对于根元素，常用于响应式布局
2.响应式布局（移动端适配）的常用方案
- media-query，根据不同的屏幕宽度设置根元素font-size
- rem，基于根元素的相对单位
然后使用rem设置 总体字体大小 和 div1的宽度
在iphone6/7/8机型上（html {font-size: 100px;}）可以看到，
div1盒子的字号为16px（0.16×100=16px）
宽度为100px（1×100=100px）
iPhone也一样，宽度为375px
在iphone6/7/8 Plus机型上（html {font-size: 110px;}）
div1盒子的字号为17.6px（0.16×110=17.6px）
宽度为110px（1×110=110px）
接着就可以对任何元素的属性实现响应式，比如：line-height行高、padding内边距、margin外边距……
3.rem的弊端——“阶梯”性
有弊端，但还是能用
“阶梯”性 —— 在某一阶梯的整个跨度中无变化。
如果想要实现，376px比375px大一点？或者413px比375px大？（需要产生变化）
4.网页视口尺寸
- window.screen.height //屏幕宽度（手机点亮屏幕）
- window.innerHeight //网页视口高度（浏览器去除头尾，可以显示内容的部分）
- document.body.clientHeight //body高度（内容高度）
如图，667是window.screen.height；553是window.innerHeight；内容高度为浏览器头部底到红色矩形底
模拟器没有头和底部工具栏，与实际不同。
document.body.clientHeight为内容高度（随网页内容变化）
5.vw/vh
- vh网页视口高度（window.innerHeight）的1/100
- vw网页视口宽度（window.innerHeight）的1/100
- vmax取两者最大值，vmin取两者最小值
把手机上能显示网页的区域的高度与宽度平均分成100份，1个vh/vw就是1份。——“阶梯”性就没有了。
10vw/10vh就是网页视口的宽度/高度 百分之十 即 十分之一
vmax取vw和vh的最大值（变成正方形）
再看看vmin
等式
