适配、px,vm,rem，百分比，vm/vh、像素

1.单位

绝对单位：px

相对单位：em、rem、百分比、vm/vh

px：相对于屏幕分辨率

em：相对于父元素的font-size，所以不同位置设置1em是不同的

rem：rem是CSS3新增的一个相对单位，但相对的只是HTML根元素 font-size。rem只适用于固定尺寸。

百分比：相对长度单位，相对于父元素的百分比值

vm、vh、vmin、vmax是一种视窗单位，也是相对单位。

        vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
        vh：视窗高度的百分比
        vmin：取当前Vw和Vh中较小的那一个值
        vmax：取当前Vw和Vh中较大的那一个值
        vh和vw相对于视口的高度和宽度， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度 比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易实现与同屏幕等高的框。

---

2.像素：物理像素/css像素

屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
分辨率：1920 x 1080 说的就是屏幕中小点数量
在前端开发中像素要分成两种情况讨论：CSS像素和物理像素
物理像素，上述所说的小点点就是属于物理像素
CSS像素，编写网页时，我们所用像素都是CSS像素
浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
一个CSS像素最终由几个物理像素显示，由浏览器来决定
默认情况下在pc端，一个CSS像素 = 一个物理像素

而在移动端，像素比可以是2或3，即一个CSS像素=两个物理像素，所以手机端可以通过这种差异来画一条0.5px的线，这个px是CSS像素

---

3.视口、像素比值

视口( viewport )
视口就是屏幕中用来显示网页的区域

可以通过查看视口的大小，来观察CSS像素和物理像素的比值

默认情况下：
视口宽度 1920px （CSS像素）
视口宽度 1920px （物理像素）
此时，CSS像素和物理像素的比就是1:1

网页放大两倍的情况：
视口宽度：960px（CSS像素）
视口宽度：1920px（物理像素）
此时，CSS像素和物理像素的比就是1:2

可以通过改变视口的大小，来改变CSS像素和物理像素的比值

---

4.完美视口

可以通过 meta 标签来设置视口大小

将网页设置为完美视口：

  <meta name="viewport" content="width=device-width">

---

5.移动端布局

在移动端开发中的视口问题（VW单位）
不同的设备完美视口的大小是不一样的
由于不同设备的视口和像素比不同，所以同样的375个像素在不同的设备下意义是不同的（比如在iPhone6中 375就是全屏，而到了plus就会缺一块）
所以在移动端的开发时，就不能再使用px来进行布局了
vw 表示的是视口的宽度（viewport width）
100vw = 一个视口的宽度
1vw = 1%视口宽度
vw这个单位永远相当于视口宽度进行计算
移动端常用的视口宽度为750px 和 1125px
例子：设计图750px
使用vw作为单位
100vw = 750px（设计图的像素）–> 0.13333vw = 1px

html{
	/*
		网页中的字体大小最小就是12px，不能设置一个比12px还小的字体
			如果我们设置了一个小于12px的字体，则字体自动设置为12px

		0.133333vw = 1px
		乘于40得：
		5.333333vw = 40px
	*/
	font-size: 5.3333333vw;
}

.box{
	/*
		1rem = 1 html的字体大小
		1rem = 40px(设计图)
	*/
	width: 18.75rem;  /* 750px/40 */
	height:0.875rem; 
}

---

6.媒体查询

目的：响应式布局，让一个页面使用所有设备

写法：@media ·查询规则·{css样式}

查询规则有：

媒体类型：all、print、screen、speech屏幕阅读器

媒体特性：width（min-width、max-width）

例：@media only screen（min-width:768px）and (max-width:1200px)   {...}