自适应网页设计

一、自适应网页设计基础

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

首先，在网页头部加入viewport元标签

2. 不使用绝对宽度

不能指定width: XXpx;，只能指定width: XX%;或者width:auto;。

3. 使用相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {
　　font: normal 100% Helvetica, Arial, sans-serif;
}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

4. 采用流式布局

流式布局（float）避免水平滚动条的出现。

5. 选择加载css

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。
自动探测屏幕宽度，然后加载相应的CSS文件。

6. css的@media规则

@media screen and (max-device-width: 400px) {
　　.column {
　　　　float: none;
　　　　width:auto;
　　}
　　#sidebar {
　　　　display:none;
　　}
}

7. 图片的自适应

通常只需要一句话即可：

img { max-width: 100%;}

对于不支持max-width的老版本IE：

img { width: 100%; }

windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

二、Bootstrap中的自适应设计

1. Bootstrap基本模板

    
    
    
    
    
    
    
    
    
    


    
你好，世界！
    
    
    
    

将下面的标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面：

目前只有360浏览器支持此标签。

2. Normalize.css

3. 栅格系统（栅栏布局）

（1）媒体查询

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

（2）栅格参数

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

（3）基本结构及具体样式定义
基本结构：

基本样式：

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-xx-i {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;

  float: left;
  width: xx%；
}

列偏移：

.col-xs-offset-1 {
  margin-left: 8.33333333%;
}

列排序：

.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}

三、网页自适应设计常用结构

1. 多列等宽布局

2. 一侧固定宽度、一侧自适应两栏布局

3. 两栏等高布局

参考资料

1. 阮一峰的网络日志-自适应网页设计（Responsive Web Design）
2. Bootstrap中文网