响应式布局
响应式页面的基本写法:
—— 创建通用非响应式页面，可以将页面设置固定宽度，完成后添加媒体查询（@media）及响应代码。
1、首先应设置好 <meta> 标签。例如：
1 // 屏幕1:1显示，阻止用户缩放 2 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 3 // 用来指定IE8浏览器去模拟chrome内核的渲染方式 4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 5 // 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 6 <meta name="HandheldFriendly" content="true">
2、媒体查询（media query）
使用媒体查询可以针对不同的媒体类型定义不同的样式。
常用的属性包括 屏幕宽度 和 屏幕方向，例如：
1 // ipad 2 @media only screen and (min-width:768px)and(max-width:1024px){} 3 // iphone 4 @media only screen and (width:320px)and (width:768px){}
① @media 语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
② mediatype 媒体类型最常见的 screen，用于电脑屏幕，平板电脑，智能手机等。
③ 逻辑关系包括 and：与，not：非，和 only：仅限于。
④ media feature 媒体属性，常见的包括尺寸属性，如例子中的 min-width 和 max-width；
屏幕方向（屏幕高宽的关系）orientation属性，表示输出设备中的页面可见区域高度是否大于或等于宽度。它的值有两个，portrait 指竖屏；landscape 指横屏。
3、内容处理
① 页面元素的尺寸
px像素应该是最常用的尺寸单位。响应式页面可以选用定比缩放，百分比尺寸设置等方法，css3引入了 rem，更好的保证响应式页面中元素的相对比例更加协调，更方便于响应式开发。
-
- rem —— 相对于根元素的字体大小的单位，一般在 html 中设置根字体大小
- em —— 相对于父元素的字体大小的单位
技巧：图片，容器等尺寸设置，宜灵活得使用 max-width， min-width，宽高 100% 或 auto等方法；背景图片的 background-size属性，可以设置 cover（等比扩展填充，有时超出部分被隐藏）、contain（等比填充不扩展，有时尺寸较短方向会留白）。
