响应式网页设计

其实响应式网页的实现很简单，都是大家熟悉的技术。
一：media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的，而它们自带的浏览器都是基于webkit内核，所以我们可以完全使用viewport属性和media query技术实现网站的响应性：

后面的initial-scale表示初始缩放，maximum-scale表示最大缩放比例，1意味着不能进行缩放。

 

/* for 240 px width screen */
 @media only screen and (max-device-width:240px){
 selector{
 }
 }
 
/* for 360px width screen */
 @media only screen and (min-device-width:241px) and (max-device-width:360px){
 selector{
 }
 }
 
/* for 480 px width screen */
 @media only screen (min-device-width:361px)and (max-device-width:480px){
 selector{
 }
 }

二：fluid grid(流体网格)

很多项目都在使用网格技术(或者叫栅格)，前几年960.gs很流行，但是随着屏幕分辨率的普遍提升，它已经不太适合当前需求了，于是最近几年fluid grid开始逐渐多了起来，这种技术其实也很简单，只是将格栅的单位由px变成%，用百分比来控制页面每列的宽度，从而实现宽度的自适应。

使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面的完整展现和基本功能。这也是一种不错的方法。

三：flex box

flex box是css3中的新技术，它很强大，可以实现很多我们之前无法想象的自适应布局。

有时我们希望网站能够以webapp的外观呈现给手机用户，flexbox是个不二的选择。

比如，要实现这样的简单结构：

它很像一个app的结构，头部和底部固定，中间高度自适应，用flexbox可以简单实现：

.flex_wrap{
 height:100%;
 display: box;
 display: -moz-box;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -moz-box-orient: vertical;
 box-orient: vertical;
 }
 .flex_bd{
 box-flex: 1;
 -moz-box-flex: 1;
 -webkit-box-flex:1;
 background:#E7E7E7;
 overflow-y:auto;
 }
 .flex_hd{
 background:#16364C;
 height:30px;
 line-height:30px;
 text-align:center;
 color:#FFF;
 font-weight:700;
 font-family:14px;
 }
 .flex_ft{
 background:green;
 height:30px;
 line-height:30px;
 text-align:right;
 }