响应式网站

一、响应式网站概念

响应式网站是一个设计理念，它是多项技术的综合体

flexible grid layout 弹性网格布局

flexible image 弹性图片

media queries 媒体查询

二、响应式网站的优点与缺点

1. 优点

（1）减少工作量

• 网站、设计、代码、内容都只需要一份
• 多出来的工作量只是JS、CSS样式的修改

（2）节省时间

（3）每个设备都能得到正确的设计

（4）搜索优化

1. 缺点

（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+（小，中，大，巨屏幕）

接下来的博客中，还是主要讲述响应式网站的开发，欢迎继续关注