译者：辣椒油 书名：http://www.majiang.life/blog/head-first-responsive-web-design/
序言
总听自己说积极响应式产业布局，真的是三个很矮小上的小东西，日前做的三个工程项目须要网络连接相同的萤幕体积，只好就单纯科学研究了呵呵Web积极响应式产业布局，只不过基本原理很单纯，上面就单纯重新整理了呵呵撷取给他们。
甚么是积极响应式产业布局
[ caktusgroup]
如图是积极响应式产业布局的充分体现，单纯的说积极响应式产业布局是三个中文网站能相容数个终端产品，而并非为每一终端产品做三个某一的版。那个基本概念随著终端电子设备的蓬勃发展而受到重视。 比如说头条新闻他做的就并非积极响应式产业布局，他透过动态检验电子设备重要信息，在www.toutiao.com和 m.toutiao.com三个中文网站间转换。而前段时间较为火的开发人员街道社区 segmentfault.com是积极响应式产业布局，网页的产业布局会会随著你拖曳应用程序询问处大小不一变动而变动。积极响应式产业布局没当然不然好与坏，须要依照中文网站的物理性质来确认，比如说toutiao的网页原素十分多，网页须要主要包括大部份萤幕体积的式样表明并非较好操作方式，不过 segmentfault网页原素较少，反倒放到一同方便快捷保护。
怎样加速同时实现 web积极响应式产业布局
他们透过三个范例来具体内容表明，具体来说采用 @media关键字为相同的萤幕体积设置相同式样，关于 @media他们下文有更详细的介绍
代码片段：
<styletype=“text/css”>
@media only screen and(min–width:480px){
.col–sm–6,.col–sm–12{
float: left;
}
.col–sm–12{
width:100%;
}
.col–sm–6{
width:50%;
}
}
@media only screen and(min–width:768px){
.col–md–6,.col–md–12{
float: left;
}
.col–md–12{
width:100%;
}
.col–md–6{
width:50%;
}
}
</style>
<divclass=“container”>
<divclass=“col-md-12 col-sm-12 row”>
<divclass=“col-md-6 col-sm-12 col-1 col”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<divclass=“col-md-6 col-sm-12 col-2 col”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
他们单纯解释一下上述代码片段min–width指的是当萤幕体积大于当前值的时候式样生效。 外层的 div包裹内层的三个 div。 col–md–6col–sm–12当萤幕体积大于 768px的时候子 div宽度是父div的一半，所以是并排。当萤幕体积大于 480px的时候子 div宽度和父 div的宽度一样。下图为相同体积下的效果图。
768px
480px
注意观察的同学又发现问题了，图二没办法看啊，太小了吧。是的，他们的积极响应式还没做完，那个时候他们在head里面添加如下一行代码再试试？那么问题来了，图一体积大于 768px不假，但是也大于 480px啊，那么怎么就按照 768px的体积排布了呢？这里就涉及到了 CSS优先级： CSS 的基本优先级如下 （外部式样）Externalstyle sheet<（内部式样）Internalstyle sheet<（内联式样）Inlinestyle如果优先级一样便有三个覆盖原则，后面的覆盖前面的，只好如例，当萤幕体积慢慢变大到768px的时候，后者遍生效了。
<metaname=“viewport”
content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”>
如图神奇的一幕出现了：
width=device-width: 表示此宽度不依赖于原始象素(px)，而依赖于屏幕的宽度.这样他们就大功告成了.如须要下载源码请点击，在线查看请点击。想知道为甚么meta有那么大作用请翻看下文。
Meta ViewPort 是甚么
手机应用程序是把网页放到三个虚拟的“询问处”( viewport)中，通常那个虚拟的“询问处”( viewport)比萤幕宽，默认是把网页挤到三个很小询问处以便全部预览，这样也不会破坏没网络连接手机产业布局的网页。终端版的 Safari 应用程序最新引进了 viewport 那个 meta tag，让网页开发人员来控制 viewport 的大小不一和缩放，其他手机应用程序也逐步支持。他们如果做了手机萤幕体积的网络连接就可以手动调整 viewport，这样就可以把网页内容和手机产业布局合理的展示给用户。上面是具体内容参数的表明：
width设置layout viewport 的宽度，为三个正整数，或字符串”width-device”initial-scale设置网页的初始缩放值，为三个数字，可以带小数minimum-scale允许用户的最小缩放值，为三个数字，可以带小数maximum-scale允许用户的最大缩放值，为三个数字，可以带小数height设置layout viewport 的高度，那个属性对他们并不重要，很少采用”user-scalable是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许Media Queries 详解
中文叫做媒体查询，它包含三个媒体类型(media type)和至少三个表达式，用媒体特性限制式样表的作用范围。上面他们直接透过范例对相对的关键字进行分析：
only用于向早期应用程序隐藏媒体查询，比如说IE如果不支持不然直接忽略当前定义的式样。和其他表达式一同用须要and
@mediaonly screenand(min–width:400px)
screenscreen是一种 媒体类型，例中的 screen意思是仅支持彩色电脑表明器。其他属性如下： all：适用与大部份电子设备 print：paged material and documents viewed on screen in print previe mode. screen: 彩色电脑表明器 speech：intended for speech synthesizers
andand是一种 操作方式符，表示被链接的表达式不许同时满足，其他表达式如下：and：大部份条件必须满足 ,：只要满足一种条件即可 not：条件的取反
min-widthmin–width是 媒体特征，他的意思是最小宽度满足的时候就为真，其他媒体特征：
width: viewport width
height: viewport height
aspect-ratio: viewport的宽高比如说：16/9
orientation: 宽度和高度的大小不一关系
resolution: pixel density of the output device
scan: scanning process of the output device
grid: is the device a grid or bitmap
color: number of bits per color component of the output device, or zero if the device isn’t color
color-index: number of entries in the output device’s color lookup table, or zero if the device does not use such a table
总结
笔者只是随学随卖，抛砖引玉，如有想更深入理解 积极响应式产业布局请观看如下参考链接。
推荐阅读
长按指纹
