响应式页面、媒介查询、常见适配范围、响应式页面特点、常见的布局方案

响应式页面

根据浏览器窗口不同的大小，显示不一样的样式 
媒体查询 @media 设备类型 and 媒体特性{}
		@media 关键字
		设备类型：all(所有设备)/screen(显示器、笔记本、移动端设备)
		and 连接符  and两侧有空格
		媒体特性 max-width/min-width (1)px后面不要加(2)多个媒体特性用and连接

常见适配范围

设备范围
	默认样式    注意：默认样式要写在最前面
	/* 打印样式 */
		@media print {}
	/* 手机等小屏幕手持设备 */
		@media screen and (min-width: 320px) and (max-width: 480px) {}
	/* 平板之类的宽度 1024 以下设备 */
		@media only screen and (min-width: 321px) and (max-width: 1024px) {}
	/* PC客户端或大屏幕设备: 1028px 至更大 */
		@media only screen and (min-width: 1029px) {}
	/* 竖屏 */
		@media screen and (orientation:portrait) {对应样式}
	/* 横屏 */
		@media screen and (orientation:landscape){对应样式}