响应式布局

响应式布局

响应式布局即一个页面可以兼容多种终端设备

说白了就是页面随着屏幕尺寸的改变来自适应

移动Web开发与响应式布局比较：

域名以 m. 开头

移动Web开发只适配于移动设备

一般采用百分比布局

一般是在已有PC端页面的基础上扩充

多采用通栏

较响应式布局来说开发成本低

屏幕尺寸

尺寸	设备
< 768px	超小屏幕
768px — 992px	小屏幕
992px — 1200px	中等屏幕
> 1200px	宽屏幕

响应式布局原理

Media Query（媒介查询）

.container {
width: 100%;
height: 300px;
background-color: pink;
}
// 指定它用来查询屏幕
@media screen and (min-width: 768px) {
.container {
background-color: red;
}
}
@media screen and (min-width: 992px) {
.container {
background-color: blue;
}
}
@media screen and (min-width: 1200px) {
.container {
background-color: green;
}
}

显示效果：

< 768px        显示为 pink
768px - 992px  显示为 red
992px - 1200px 显示为 blue
> 1200px       显示为 green

Bootstrap常用样式

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架

用于开发响应式布局、移动设备优先的 Web 项目

container类

用于定义一个固定宽度且居中的版心

<div class="container">
<!--
此处的代码会显示在一个固定宽度且居中的容器中
该容器的宽度会跟随屏幕的变化而变化
-->
</div>

栅栏系统

Bootstrap中定义了一套响应式的网格系统

其使用方式就是将一个容器划分成12等份

然后通过col-xx-xx的类名控制每一列的比例

row类

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

通过“行（row）”在水平方向创建一组“列（column）”

row类的一个作用就是通过左右margin:0 -15px;屏蔽掉container类的padding

<div class="container">
<div class="row"></div>
</div>

col-xx-xx类

col-md-offset-[偏移列数] 类（列偏移）

列数	显示屏幕尺寸	-
col-xs-[列数]：	自适应	在超小屏幕下及以上展示几份
col-sm-[列数]：	> = 768	在小屏幕下及以上展示几份
col-md-[列数]：	> = 992	在中等屏幕下及以上展示几份
col-lg-[列数]：	> = 1200	在大屏幕下及以上展示几份

Bootstrap中国官网：http://www.bootcss.com/