自适应网页布局

自适应设计（Responsive Design）是指创建网站时仅用一套代码即可令它适应各种不同的屏幕尺寸。2010年，Ethan Marcotte提出了”自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

1、允许网页宽度自动调整

首先，在网页代码头部，加入一行viewport 元标签

<meta name="viewport" content="width=device-width,initial-scale=1"/>
//网页默认等于屏幕宽度，原始缩放比例为1.0，即网页初始大小占屏幕面积的100%。

浏览器推出了“viewport meta”标签，许多移动浏览器现在都支持这个标签，W3C 协议定义 viewport meta 目前还属于草案，很多人都會在html head 处加上 viewport 这个meta data。

viewport设置属性如下：

• width：可设定数值，或者指定为 device-width
• height：可设定数值，或者指定為 device-height
• initial-scale：第一次进入页面的初始比例
• minimum-scale：允许缩小最小比例
• maximum-scale：允许放大最大比例
• user-scalable：允许使用者缩放，1 or 0 (yes or no)

device-width ，主要是为了让整个页面宽度与手机可视宽度相同，这样就可以简单相容于不同机型屏幕大小，如果这边width沒有设定的话，就会依照html/css给予的width当作预设值。因为解析度不同，device-width有时候不一定是view width，所以在类似iphone 4高解析度机器上，device-width=320 ，可是实际解析度为480，这时候就需要利用javascript针对UA下去做动态调整。
user-scalable，这个属性可以让使用者能否放大、缩小页面，如果页面不允许手机使用者缩放，就直接设定0或者no，反之要启动缩放功能，就设置1或者是yes。

2、 设置绝大多数元素都为相对值

不适用绝对宽度；
字体也要用相对大小em

(1) 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度（margin-left:5px）的布局，也不能使用具有绝对宽度(例如：width：200px)的元素,而最好使用百分比宽度width:20%;或者with:auto;
（2） em方式：
设置主容器或body的font size, 以此为基础，以em为单位计算并设置其他所有元素。注意：em最大支持3位小数。

body { font: normal 100% Helvetica, Arial, sans-serif; }
//上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 { font-size: 1.5em; }  
//h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）

3、 流动布局（fluid grid）

  流动布局的含义：各个位置都是浮动的，不是固定不变的

  float的好处是：如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

.main { float: right; width: 70%; } 

.leftBar { float: left; width: 25%; } 

4、 CSS3 Media Query

   自动探测屏幕宽度，然后加载相应的css文件
  media queries是一个非常好用的、强大的工具，它可以实现样式跟随屏幕分辨率而定。自适应设计的关键是根据屏幕的宽度（width）来实时加载备选的样式或增加特定的样式。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
//如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" /> 
//如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

5、 CSS的@media规则

@media screen and (max-device-width: 400px) {      
    .column { float: none; width:auto; } 
    #sidebar { display:none; } 
} 
/*如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）*/

6、 图片的自适应

一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：
    1、响应式布局
    2、响应式内容（图片、多媒体）

一个简单的方法可以让图片也流体化，设置分界点调用不同的图片，当然这个方法的前提是带宽不成问题。

1. 简单地自适应调节图片大小：
   设置图片宽度为：img{width:100％;}
   或设置最大尺寸为图片实际尺寸：img{max-width:100%;}

2. 设置分界点：
   图片的src属性目前还不能在media query里被独立操纵，所以，可能的方法如下：
   a. 设置背景图片：在不同的分界线内设置不同的背景图片
   b. 显示/隐藏父级元素：用不同的图片，并在media query里设置显示或隐藏它的父级元素。 为什么不显示和隐藏图片本身呢？这是因为有些终端浏览器根本不会加载设置了display:none的图片，为了节省带宽！

本文参考多篇博文，先附上博文地址：
1.十个自适应网站设计TIPS

2.手机web——自适应网页设计（html/css控制）

3.响应式网页设计

4.自适应网页设计与响应式网页设计

5.自适应网页设计（Responsive Web Design）