响应式网站优点：
- 减少工作量：①网站、设计、代码、内容只要一份②多出来的工作量只是JS脚本、CSS样式做一些改动
- 节省时间。
- 每个设备都能得到正确的设计。
- 搜索优化。
- 更好的用户体验。
响应式网站的缺点：
- 回家再更多的样式和脚本资源。
- 设计比较难控制和精确定位。
- 老版本浏览器兼容性不好。
媒体查询
CSS2中
<link rel="stylesheet" type="text/css" herf="site.css" media="screen"/>
<link rel="stylesheet" type="text/css" herf="site.css" media="print"/>
CSS3中
@media all and (min-width;800px) and (orientation:landscape){
}
CSS3媒体属性简介
width：视口宽度
height：视口高度
device-width：渲染表面的宽度，就是设备屏幕的宽度。
device-height：渲染表面的高度，就是设备屏幕的高度。
orientation：检查设备处于横向还是纵向。
aspect-ratio：基于视口宽度和高度的宽高比，就是width/height，如：16/9,4/3.
device-aspect-ratio：渲染表面的宽度，就是设备屏幕的宽度。
color：每种颜色的位数bits，如：min-color：16位，8位
resolution：检查屏幕或打印机的分辨率，如：min-resolution:300dpi。
以上属性都可以添加min-或max前缀。
viewport视口
布局视口
可视视口
理想视口（就是布局视口在一个设备上的最佳尺寸，理想视口下的页面便与浏览器浏览，阅读）
<meta name="viewport" content="width=device-width,指定布局视口为用户浏览器理想视口
minimum-scale=1.0,最小的缩放比例
maximum-scale=1.0,最大的缩放比例
user-scalable=no"/>禁用用户缩放
响应式网站实际实践原则
progressive enhancement 渐进增强
graceful degradation 优雅降级