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

   
header
   
main
   

针对不同布局编写不同的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为设备类型》比如print/screen/TV等等

实际应用三 判断设备宽高：

/* 宽度大于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上的应用或者网站。这样响应式才会做的更合理更人性化。