Day16-响应式布局+移动端适配

0821：Day16

响应式布局：

响应式布局：

响应式布局
	特点：
		面对不同的分辨率设备灵活性强
		能够快捷解决多设备显示适应问题
	缺点：

媒体查询：

媒体查询：根据显示器的特性，为其设置CSS样式

1.媒体查询的语法：
		1.内嵌式：
			直接添加在自己的CSS文件里
			@media all and (min-width:320px) and (max-width:1024px){ 
				body { background-color:blue;} 
			}
		2.外链式：
			以外部样式表设置独立的CSS文件，通过link链接进来
			<link rel="stylesheet" media="screen and (max-width:960px)" href="style.css">

2.设备类型：
	all    所有设备
	screen 显示器，笔记本，移动端等设备

3.条件表达式：一个或多个
	最小宽：min-width:value;
	最大宽：max-width:value;
	竖屏：orientation:portrait
	横屏：orientation:landscape

4.关键字：
	and	和
	not 排除某种设备
	only 限定某种设

移动端适配：

1.移动端meta标签：
	设置可视窗口得宽度等于当前设备的宽度，并且不能手动缩放
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2.rem单位：
	rem：相对单位，始终相对html根元素的font-size的大小显示
	默认时，html的font-size=16px；即1rem=16px
	px to rem 插件快速转换方法：
		CTRL+A
		ALT+Z
3.vw单位：
	视口宽度单位：vw
	视口高度单位：vh
	100vw=100% 屏幕宽度的100%
	以iPhone6为标准宽度375px
	100vw=100%=375px
	1vw=1%=3.75px
	100px = 26.7vw
	html的font-size:26.67vw