响应式网站
一、响应式网站概念
响应式网站是一个设计理念，它是多项技术的综合体
flexible grid layout 弹性网格布局
flexible image 弹性图片
media queries 媒体查询
二、响应式网站的优点与缺点
- 优点
（1）减少工作量
- 网站、设计、代码、内容都只需要一份
- 多出来的工作量只是JS、CSS样式的修改
（2）节省时间
（3）每个设备都能得到正确的设计
（4）搜索优化
- 缺点
（1）会加载更多的样式和脚本资源
（2）设计比较难精确定位和控制
（3）老版本浏览器兼容不好
三、 媒体查询
CSS2中：
<link rel="stylesheet" type="text/css" href="site.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">CSS3中：媒体类型和函数
all代表所有媒体类型
@media all and(min-width:800px)and(orientation:landscape) {
...
}
可用媒体查询符not、and、only进行连接
“,”分隔代表的其实就是”or”
only: 防止老旧的浏览器，不支持带媒体属性的查询，而应用到给定的样式
CSS媒体属性简介：
width : 视口宽度
height：适口高度
device-width: 渲染表面的宽度，就是设备屏幕的宽度
device-height：渲染表面的高度，就是设备屏幕的高度
orientation: 检查设备处于横向还是纵向
aspect-ratio：基于视口宽度和高度的宽高比
device-aspect-ratio：渲染表面的宽度，就是设备屏幕的宽度
color：每种颜色的位数bits 如: min-color:16位，8位
resolution：检查屏幕或打印机的分辨率，如min-resolution：300dpi
以上属性都可以添加min-和max-
viewport
布局视口（layout viewport）、可视视口（visual viewport）、理想视口（ideal viewport）
布局适口：
document.documentElement.clientWidth/clientHeight 可以获得布局视口的宽度和高度，视口布局的长宽就等于在屏幕上展示的尺寸。当用户放大时，这些尺寸保持不变。布局视口宽度总是不变的。如果你旋转你的手机，可视视口改变，但浏览器为了适应这个旋转，会放大一些可视宽度，但布局视口大小依然不变。
一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题
可视视口：可视视口就是展示在屏幕上的部分，用户可能滑动来改变可视区域，或者缩放来改变可视区域的大小。window.innerWidth/Height可以得到可视视口的宽高
理想视口：布局视口在一个设备上的最佳尺寸，理想视口下的页面便于浏览器浏览、阅读，通常是我们说的屏幕分辨率。（就是为构建手机浏览器优化的页面而添加的）
dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值，换句话说 dip 的值就是理想视口，也就是分辨率）的值
width属性：
width属性被用来控制layout viewport（布局视口）的宽度，layout viewport（布局视口）宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数，也可以设为device-width这一特殊值，一般为了自适应布局，普遍的做法是将width设置为device-width
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">width=device-width 也就是将布局视口的宽度设置理想视口。网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip 的宽度值是相等的。
minimum-scale=1.0 （最小的缩放比例）
maximum-scale=1.0（最大的缩放比例）
user-scale=no （禁用了用户缩放）
书和放大镜：书是布局视口，放大镜可视适口
四、分析设计图
对于响应式网站的设计图，我们应该先分析的是网页的基本结构，然后再是针对不同屏幕大小下的差异，找到相同和不同
五、响应式网站设计实践原则
- progressive enhancement 渐进增强
- graceful degradation 优雅降级
- 断点的选择：0-480、481-800、800-14000， 1400+（小，中，大，巨屏幕）
接下来的博客中，还是主要讲述响应式网站的开发，欢迎继续关注