CSS基础知识

通用分辨率
超小屏幕 （移动设备） w<768px
小屏设备 768px-992px 768 <= w <992
中等屏幕 992px-1200px 992 =< w <1200
宽屏设备 1200px以上 w>=1200

---

pt
点（Point）。绝对长度单位。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

px
像素（Pixel）。相对长度单位。
像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。

pc
派卡（Pica）。绝对长度单位。相当于我国新四号铅字的尺寸。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

em
相对长度单位。继承父级元素。最初是指字母M的宽度。
现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。
通常1em=16px。

rem
font size of the root element
它是相对于html根元素的(在body标签里面设置字体大小不起作用)

vw
viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh
viewpoint height，视窗高度，1vh等于视窗高度的1%。

vmin
vw和vh中较小的那个。

vmax
vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持

其他
ppi: pixel per inch，每英寸像素数，该值越高，则屏幕越细腻
dpi: dot per inch，每英寸多少点，该值越高，则图片越细腻
dp: dip，Density-independent pixel, 是安卓开发用的长度单位，1dp表示在屏幕像素点密度为160ppi时1px长度
sp: scale-independent pixel，安卓开发用的字体大小单位。
%: 继承父元素单位

---

自适应网页设计
1、允许网页宽度自动调整

<meta name="viewport" content="width=device-width, initial-scale=1" />

网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

2、不使用绝对宽度：可以使用rem，%，auto等
3、相对大小的字体：可以使用em