纯CSS响应式的总结

响应式需要兼容的设备及尺寸

1. 手机 （分辨率不统一，320px - 414px）
2. pad（1024px * 768px 横屏 / 768px * 1024px 竖屏 ）
3. pc普屏 （1024px * 768px，一般使用1000px适配）
4. pc宽屏 （大于1190px， 1366px * 768px / 1440px * 768px / 1920px * 1080px …）

媒体查询的判断条件

1. min-width / max-width （遵循顺序原则，一般从小写到大）
2. 设备类型

/* 
 * 一般根据屏幕宽度写的响应式页面如下 
 * 从最低宽度写起，避免pc端的额外样式再还原回默认值了,如：positon: static; float: none; border: none; ...
 */
div{
	/* 这里写通用样式和手机样式 */
}
@media (min-width: 768px){
	div{
		/* pad样式，一般小于768的都为手机样式 */
	}
}
@media (min-width: 1000px){
	div{
		/* pc样式，可以设为1000 兼容pad横屏，也可以设置到1024只用于电脑 */
	}
}

媒体查询的关键字和条件

1. and 并且

@media (min-width:768px) and (max-width: 999px){
	/* 宽度大于等于768px，并且小于等于999px */
}

2. not 不是

@media (min-width:768px) not screen{
	/* 最小宽度768px，而且不是屏幕 */
}

3. only 不支持的忽略

@media (min-width:768px) onlt screen{
	/* 满足最小宽度768px，不是屏幕的忽略 */
}

4. device-width / min, max 设备的实际宽度

@media (min-device-width:768px) and (max-device-width:1000px){
	/* 设备实际宽度满足 >= 768 && <= 1000 */
}

5. landscape横屏 / portrait 竖屏

@media (orientation:landscape){
	/* 单独写的话 类似于min-width 也要加括号 */
}
@media (max-width:768px) and (orientation:landscape){
	/* 可以与别的条件用时使用 */
}

响应式媒体类型

可以指定的值	设备类型
all	所有设备
screen	电脑显示器
print	打印用纸或打印预览视图
handled	便携设备
tv	电视机类型的设备
speech	语音和音频合成器
braile	盲人用点字法触觉回馈设备
embossed	盲人打印机
projection	各种投影设备
tty	使用固定密度字母栅格的媒介，比如电传打字机和终端

响应式样式表的引用

为了后期更方便调整和修改，一般写成样式表，如：
common.css（公用样式 / 手机样式） / pad.css / pc.css / pc-w.css
再比如有ie6-8兼容要求时，ie.css

<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/pad.css" media="screen and (min-width:768px)" />
<link rel="stylesheet" href="css/pc.css" media="screen and (min-width:1000px)" />
<link rel="stylesheet" href="css/pc-w.css" media="screen and (min-width:1200px)" />

其他

1. 为了移动端的适配添加的 < meta >

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=no, user-scalable=0" />