响应式布局原理使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。

设备

尺寸区间

手机

<768px

平板

[768px, 992px)

桌面显示器

[992px, 1200px)

大桌面显示器(电脑)

>=1200px

响应式布局容器响应式布局需要一个父级作为布局容器，让子级元素实现变化效果

原理：在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同大小的屏幕下，看到不同的页面布局和样式。

常用的响应式尺寸划分：

设备

尺寸区间

宽度设置

手机

<768px

100%

平板

[768px, 992px)

750px

桌面显示器

[992px, 1200px)

970px

大桌面显示器(电脑)

>=1200px

1170px

除了手机的宽度设置是 100%外，其他设备的宽度设置都会比设备的尺寸区间最小值小一点，原因是留空一点，不占满屏幕，然后容器可以居中显示。

例子：

代码语言：javascript复制

BootstrapBootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

使用步骤下载 Bootstrap

把会用到的文件夹放到要用的站点文件夹下

另外，要防止低版本 ie 没办法用 h5、css3 的新东西，导致出问题，html 骨架需要加点料。

代码语言：javascript复制

name="viewport"

content="width=device-width, initial-scale=1.0, user-scalable=0"

/>

注意！这里 if 这一段是注释，但是，注释的部分只是说浏览器不渲染，不显示被注释的代码，但是，浏览器还是回去读注释的代码的（刷新想法）

代码语言：javascript复制

引入要用的 css 文件等

代码语言：javascript复制

rel="stylesheet"

href="../bootstrap-3.4.1-dist/css/bootstrap.min.css"

/>

在全局 CSS 样式中选要用的东西，复制对应标签

代码语言：javascript复制（危险）Danger

根据自己需要修改

代码语言：javascript复制

组件使用例子：

代码语言：javascript复制

Bootstrap 布局容器Bootstrap 预定义了两个 container 容器

container 类响应式布局的容器，固定宽度大屏(电脑)(>=1200px)：宽度固定为 1170px中屏(桌面显示器)(>=992px)：宽度固定为 970px小屏(平板)(>=768px)：宽度固定为 750px超小屏(手机)(<768px)：宽度固定为 100%代码语言：javascript复制

name="viewport"

content="width=device-width, initial-scale=1.0, user-scalable=0"

/>

rel="stylesheet"

href="../bootstrap-3.4.1-dist/css/bootstrap.min.css"

/>

上面的例子等价于响应式布局容器的例子，简单来说就是，有大佬已经把它封装好了，可以直接用

container-fluid 类流式布局容器，100%宽度占据全部视口(viewport)的容器适合于单独做移动端开发栅格系统栅格系统是将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流动栅格系统，会把 container 分为 12 列。

栅格系统通过一系列的行(row)和列(column)的组合来创建页面布局。

规则：

行(row)必须要放在 container 布局容器里面

要实现列的平均划分，需要给类添加类前缀

设备

尺寸区间

宽度设置

类前缀

手机

<768px

100%

.col-xs-

平板

[768px, 992px)

750px

.col-sm-

桌面显示器

[992px, 1200px)

970px

.col-md-

大桌面显示器(电脑)

>=1200px

1170px

.col-lg-

xs(extra small)：超小；sm(small)：小；md(medium)：中等；lg(large)：大列的总和大于 12 的话，多余的列会另起一行排列每一列默认有左右 15 像素的 padding可以同时为一列指定多个设备的类名，例如class="col-md-4 col-sm-6"例子

代码语言：javascript复制

name="viewport"

content="width=device-width, initial-scale=1.0, user-scalable=0"

/>

rel="stylesheet"

href="../bootstrap-3.4.1-dist/css/bootstrap.min.css"

/>

列嵌套栅格系统可以将一个列再分成若干个小列。

例子：

代码语言：javascript复制

name="viewport"

content="width=device-width, initial-scale=1.0, user-scalable=0"

/>

rel="stylesheet"

href="../bootstrap-3.4.1-dist/css/bootstrap.min.css"

/>

列偏移使用类前缀-offset-*类可以将列向右侧偏移，这些类实际是通过*选择器为当前元素增加了左边距（margin）

代码语言：javascript复制

name="viewport"

content="width=device-width, initial-scale=1.0, user-scalable=0"

/>

rel="stylesheet"

href="../bootstrap-3.4.1-dist/css/bootstrap.min.css"

/>

列排序使用类前缀-push-*和类前缀-pull-*可以改变列的顺序（往左边是 pull，往右边是 push,写错的话得不到预期的结果）

代码语言：javascript复制

name="viewport"

content="width=device-width, initial-scale=1.0, user-scalable=0"

/>

rel="stylesheet"

href="../bootstrap-3.4.1-dist/css/bootstrap.min.css"

/>

隐藏和显示内容和上面相反的是 visible-xs, visible-sm, visible-md, visible-lg，显示内容

代码语言：javascript复制

name="viewport"

content="width=device-width, initial-scale=1.0, user-scalable=0"

/>

rel="stylesheet"

href="../bootstrap-3.4.1-dist/css/bootstrap.min.css"

/>

参考：

pink 老师前端入门教程