如何编写响应式页面与media-query（媒体查询）

如何编写响应式网页
（1）必须声明viewport标签

<meta name="viewport" content="width=device-width,initial=1.0,user-scalable=no">

（2）容器尽量使用相对尺寸
尽量避免绝对尺寸：div.container{width:500px;}
使用相对尺寸代替：div.container{width:80%}
（3）文字大小尽量使用相对尺寸
尽量避免绝对尺寸：.text{font-size:12px;}
使用相对尺寸代替：.text{font-size:0.8rem;}
（4）图片尽量使用相对尺寸
尽量避免绝对尺寸：img{width：200px;}
使用相对尺寸代替：img{width：50%;}img{max-width：50%;}//不会超过原始图片的大小
（5）页面布局尽量使用流式布局（Fluid）
float:left;或display:inline-block;
（6）响应式页面必须使用css3 Media Query技术
media：指浏览器网页设备
query：使用css自动查询出浏览器设备特性
媒体查询具体方式有两种：
（1）有选择性的执行符合条件的外部css文件

<link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/pad.css">

（2）有选择性的执行css片段中的部分

@media screen and (min-width:768px) and (max-width:991px){
	h3{ display:none; }
}