css3媒体查询实现网站响应式布局

响应式建筑设计、响应式家具设计、响应式办公设计，这些词多是已有的专业名词，也多是我本身想出来的一些名词。
由于在生活中，咱们经常会见到不少让人惊叹的设计，为何同一套东西通过不一样的方式变化以后会给人不一样的使用感觉和体验呢？
这样既节约制形成本，又节省空间，还能体验创意性的生活。

先来给你们欣赏几张图
大黄蜂：

沙发床：

沙发椅：

没错！大黄蜂为应对紧急战斗而瞬间由汽车变为战斗机，沙发床、沙发座椅是咱们见过再日常不过的家具了。
咱们老是惊叹外国人为何有这么丰富的想象力和神奇的创造力。而是什么驱动他们去想象进而去创造呢？

节省物料成本、节省人力财力成本、节省五六万一平的家居空间、享受富有创意的生活、住的更加温馨、用最强有力的一面应对随时会变的场景。
多是由于人类原本就是一个比较懒和挑的动物，因此才会去想法设法的创造让人惊奇而又实用的东西出来。

大黄蜂机器人、沙发椅或者是沙发床等等更多让咱们惊奇的东西，它们都或多或少的将响应式设计的思想融入到了产品当中。

一样响应式布局也被应用到网站前端开发中，在国内这一词想必是很是火吧，那网站为何要使用响应式布局呢？

缘由和其余创意性的生活用品基本上是同样的，处于对人力物力财力的节省和对生活富有诗意的一种追求。
在人力物力和财力有限的状况下，一个网站既要功能完善，又要跟得上移动互联网的潮流（不是瞎跟风啊），那么同一套后台系统、数据库和前端代码，怎样才能知足用户在不通场景（厕所、超市、商场、被窝）不一样设备（Iphone、ipad、电视、小米、三星、华为、HTP、诺基亚等等）上都能体验到最佳的产品体验和功能呢？
以往（在响应式概念诞生之前）的网站或者应用是怎么处理的呢？
最多见的办法就是基类（最经常使用的网站布局）+扩展类（几种不一样的网站布局类）来实现不一样的布局。

<!–使用说明：
网站基本布局，使用class="layout";
使用ipad访问时，追加class="layout-ipad";
使用iphone访问时，追加class="layout-iphone";
使用iphone横屏访问时，追加class="layout-iphone-h";
使用移动设备分辨率小于320px*480px访问时，追加class="layout-miscreen";
–>
<div class="layout layout-ipad">
  <header>header</header>
  <section>main</section>
  <footer>footer</footer>
</div>

针对不一样布局编写不一样的css代码，经过js判断设备、不一样分辨率调用不一样的布局样式，从而实现同一套前端Html代码适配不一样设备和场景，给用户带来最佳的操做体验。

自从响应式布局的概念诞生以来，它便火了起来。

官方是这么定义响应式布局设计的：

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站可以兼容多个终端——而不是为每一个终端作一个特定的版本。
这个概念是为解决移动互联网浏览而诞生的。
响应式布局能够为不一样终端的用户提供更加温馨的界面和更好的用户体验，并且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。

用一张图来讲就是这样子的：

用一句话来讲：
使用同一套Html代码来适配不一样设备和知足不一样场景不一样用户使用。

关键专业术语：
Media Query（css3媒介查询）

语法结构及用法：
@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

实际应用一 判断设备横竖屏：
/* 这是匹配横屏的状态，横屏时的css代码 */
@media all and (orientation :landscape){} 
/* 这是匹配竖屏的状态，竖屏时的css代码 */
@media all and (orientation :portrait){}
 
实际应用二 判断设备类型：
@media X and (min-width:200px){} 
X值为图中之一：

实际应用三 判断设备宽高：
/* 宽度大于600px小于960之间时，隐藏footer结构 */
@media all and (min-height:640px) and (max-height:960px){
    footer{display:none;}
}

实际应用四 判断设备像素比：
/* 像素比为1时，头部颜色为绿色 */
.header { background:red;display:block;}或
@media only screen and (-moz-min-device-pixel-ratio: 1), only screen and (-o-min-device-pixel-ratio: 1), only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio:1) {
.header{background:green;} } 
/* 像素比为1.5时，头部背景为红色 */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio:1.5) {
.header{background:red;} }
/*像素比为2，头部背景为蓝色 */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio:2){
.header{background:blue;} }

关于设备像素比， 您能够参考：
HOW TO UNPREFIX -WEBKIT-DEVICE-PIXEL-RATIO​
Device pixel density tests What's My Device Pixel Ratio?
PPI、设备像素比devicePixelRatio简单介绍、 在各类高分辨率设备中使用像素

开发中，可以使用Chrome emulation模拟移动设备的真实具体参数值。
关于Chrome Emulation可参考以前 《Chrome Emulation-移动设备特性随意配》一文。

了解了这些，那么在国内到底有多少网站有应用到响应式布局呢？有一淘、淘宝、优酷等等。
国外响应式网站很是多了，我的亲身感觉和熟悉的最典型网站就是WordPress系统了。

仍是开头说的那样，响应式布局不是赶潮流，而是有这样的一批用户须要——处于为用户在不一样的场景（拉粑粑的时候）不一样的设备（某国产山寨主流机））浏览网页时考虑的目的，使得他们能像操做PC端网页同样的天然去操做移动设备中的网页，甚至是TV上的应用或者网站。这样响应式才会作的更合理更人性化。

原文地址：http://www.css3china.com/?p=495