上周在看Ben Frain的"Responsive Web Design with HTML5 & CSS3",哈哈，Ben真是一个很幽默的家伙，一本书看下来感觉像是在看小说，或者是听段子。书里讲了一下响应式设计的原理，介绍了很多实用的工具网站，还要一下html5和css3的知识，也是很好的复习。所以打算周末写这个blog算是对自己看这本书的总结。
为什么响应式很重要
随着智能手机的越来越普遍，越来越多的人会选择用手机来浏览网页。来自某网站的统计，在2015年，高达53%的流量都来自于智能手机，仅36%的流量来自于桌面电脑。所以能够很好的在手机，平板上展现网站的内容成为了前端开发的一个重要任务。响应式web设计也应运而生。
响应式网页设计（RWD ，Responsive Web Design）这个术语，由伊桑·马科特（Ethan Marcotte）提出。他在A List Apart 发表了一篇开创性的文章，将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。如果要用一句话概括响应式网页设计，我觉得它是针对任意设备对网页内容进行完美布局的一种显示机制。相反，如果需要根据不同设备提供特定的内容和功能，那就需要一个真正的“手机版”网站。这种情况下，手机版网站会提供与桌面版网站完全不同的用户体验。
为什么使用Html5和CSS3
Ben在书中强调我们应该首选HTML5和CSS3，因为它们确实很优秀。
HTML5省时省力，简化了标签。比如HTML文档的第一行Doctype,再有script标签不再需要type属性。还有就是宽松的语法。不仅标签和属性名可以大小写混合，而且引用文件不再需要引号。而且它新增了语义化标签元素，比如head,nav, footer,section. 这些标签不仅可以让我们的页面更容易被读懂，而且对于搜索引擎也是一件好事哦。搜索引擎能够更好的理解我们网页的内容。
再说CSS3，它为响应式设计的奠定了基础。 比如媒体查询，比如内容与设计相分离。CSS3在CSS2的基础的基础上按模块构建。以CSS2为基础，对功能进行了增强或者替换。
媒体查询--支持不同的视口
媒体查询可以让我们根据设备显示器的特性为其设定CSS 样式。例如，我们仅使用几行代码，就可以根据诸如视口宽度、屏幕比例、设备方向（横向或纵向）等特性来改变
页面内容的显示方式。
媒体查询已经被广泛使用，而且也被浏览器广泛支持（如Firefox 3.6+、Safari 4+、Chrome 4+ 、Opera 9.5+ 、iOS Safari 3.2+ 、Opera Mobile 10+、Android 2.1+
和Internet Explorer 9+）。此外，要对老版本浏览器如Internet Explorer 6、7 和8 实现兼容修复（虽然基于JavaScript）也很容易。
媒体查询的语法
我们先来举个栗子
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}
上面这段代码可以实现，页面的背景色默认是灰色的，在768px到960px的屏幕下，背景颜色变成了红色，550px到768px，背景色变成橘色，320px到550px背景色为黄色，
小于320px
的屏幕上呈现绿色。
我们也可以这样使用媒体查询
这里媒体查询会判断浏览器是否是一个显示屏，媒体查询还可以进行进一步的判断，比如是否是纵向放置的显示屏
接下来，我们可以扩展一下，见识视口是宽度大于800px的
更进一步，还可以写一个媒体查询列表。查询列表中的任意一个查询为真，则加载文件。全部查询都不为真，则不加载
这里有两点需要注意。第一，媒体查询之间使用逗号分隔。第二，你会注意到在projection 之后，没有and ，也没有任何特性/ 值的组合。没有后续表达式，意味着只
要是projection 就满足条件。
媒体查询特性
width：视口宽度。
height：视口高度。
device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。
device-height：渲染表面的高度（对我们来说，就是设备屏幕的高度）。
orientation：检查设备处于横向还是纵向。
aspect-ratio：基于视口宽度和高度的宽高比。一个16∶9比例的显示屏可以这样定义aspect-ratio: 16/9。
device-aspect-ratio：和aspect-ratio类似，基于设备渲染平面宽度和高度的宽高比。
color：每种颜色的位数。例如min-color: 16会检测设备是否拥有16位颜色。
color-index：设备的颜色索引表中的颜色数。值必须是非负整数。
monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如monochrome: 2。
resolution：用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi。还可以接受每厘米像素点数的度量值，如min-resolution: 118dpcm。
scan：电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）。如720p HD电视（720p的p 即表明是逐行扫描）匹配scan: progressive，
而1080i HD 电视（1080i 中的i 表明是隔行扫描）匹配scan: interlace。
grid：用来检测输出设备是网格设备还是位图设备。
如何应用媒体查询改变我们的设计
毫无疑问，你肯定知道CSS 代表层叠样式表。所谓层叠，就是指样式表中后面的样式会覆盖前面相同的样式（除非前面的样式具有更高的针对性）。因此我们可以在样式表
的开头设置基本样式，以便适应所有设计，然后使用媒体查询来进一步重写相应的部分。例如，先针对大视口设计（用户大多数情况下使用鼠标），将导航链接设计成简单的
文字链接；然后再针对较小的视口，使用媒体查询重写这部分样式，为拇指族提供更大的点击区域。
此外，respond.js (https://github.com/sottjehl/R...为ie8及更低版本增加媒体查询支持。
阻止移动浏览器自动调整页面大小
ios 和 android浏览器都基于 WebKit（ http://www.webkit.org/）核心。这两种浏览器以及很多其他浏览器（如 Opera Mobile），都支持用 viewport meta元素覆盖默认的画
布缩放设置。只需要在 HTML的
标签中插入一个标签。标签中可以设置具体的宽度（如像素值）或者缩放比例如 2.0（设备实际尺寸的两倍）。下面是一个将页面放大到设备实际尺寸两倍显示的meta标签的示例：
viewport常用的属性：
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
响应式设计中我们采取内容优先的做法
我们想让设计在多平台多视口的情况下保留尽可能多的内容（而不是使用display:none 或类似方法来隐藏部分内容），但也要意识到内容模块显示顺序的重要性。目前，
页面中侧边栏和主内容区标签的顺序决定了侧边栏会显示在主内容区前面。显然，窄视口设备的用户应该先看到主内容，而后再看到侧边栏。我们还可以将内容区移
到导航区域之上。这样那些使用小视口设备的用户就可以先看到主内容。这样无疑是坚决贯彻“内容优先”原则的合理做法。对于顶部的导航栏，现在比较常见的方式是在移动端实现
成下拉式，通过汉堡图标表示。或者采用页面底部为导航。从页面左侧滑出的导航也是一个不错的设计思路。
部分文字摘自「Responsive Web Design with HTML5 & CSS3」
最后推荐下轮子工厂----一个分享vue,angular优秀组件的网站