响应式布局

发表于: 2021-09-17

响应式Bootstrap通过Media Query技术实现，相关的响应式CSS样式存放在bootstrap-responsive.css文件中，Media Query允许在一些条件基础上自定义CSS，不过主要是通过min-width和max-width进行设计。主要包含的定义项目：

  • 修改栅格系统中列的宽度。
  • 根据需要，用堆叠元素代替浮动。
  • 调整标题和文本的大小以适合各种设备。 Max Width
    下面的样式会在可视区域的宽度小于 600px 的时候被应用。
1
2
3
4
5
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}

如果你想链接到一个单独的样式表，把下面的代码放在标签里。

1
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。

1
2
3
4
5
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}

Multiple Media Queries
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

1
2
3
4
5
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}

Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）

1
2
3
4
5
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}

Bootstrap完全支持响应式设计，在默认情况下Bootstrap是没有引入响应式特性的，因为不是任何情况都需要使用到，建议在需要使用的时候才启用它。

1.响应式Bootstrap概述

响应式Bootstrap通过Media Query技术实现，相关的响应式CSS样式存放在bootstrap-responsive.css文件中，Media Query允许在一些条件基础上自定义CSS，不过主要是通过min-width和max-width进行设计。主要包含的定义项目：

  • 修改栅格系统中列的宽度。
  • 根据需要，用堆叠元素代替浮动。
  • 调整标题和文本的大小以适合各种设备。

当然，Media Query技术不是万能的，对于大型商业项目，建议选用JavaScript技术来解决响应式设计，可以考虑使用专门的代码库，而不是构筑在Media Query技术之上。

Bootstrap支持的几个Media Query都放在bootstrap-responsive.css文件中，调用该文件可以使页面能够灵活适应不同设备和屏幕分辨率，简单说明如表3-1所示。

Bootstrap支持的Media Query分类

类型 布局 宽度 列宽 间隙 宽度
大屏幕 大于或等于 1200px 70px 30px
默认 大于或等于 980px 60px 20px
平板电脑 大于或等于 768px 42px 20px
手机到平板电脑 小于或等于 768px 流式列 无固定宽度
手机 小于或等于 480px 流式列 无固定宽度
响应式Bootstrap

使用响应式Bootstrap的具体方法和步骤如下。

第1步：在需要使用响应式设计的页面中启用响应式特性，具体方法如下。

在文档头部区域内添加合适的meta标签。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

引入Bootstrap响应式样式表，即可启用响应式CSS。

1
<link href="bootstrap/css/bootstrap-responsive.css"rel="stylesheet" "type="text/css">

提示　如果已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。

响应式布局辅助类样式

类（Class） 手机（768px 及以下） 平板电脑（979px 到 768px） 台式机（默认）
.visible-phone 显示 隐藏 隐藏
.visible-tablet 隐藏 显示 隐藏
.visible-desktop 隐藏 隐藏 显示
.hidden-phone 隐藏 显示 显示
.hidden-tablet 显示 隐藏 显示
.hidden-desktop 显示 显示 隐藏

提示　这些类样式不支持table元素，在有限的情况下使用Bootstrap响应式设计类样式，避免创建同一个站点的不同版本。当这些类样式能对每种设备的展示做有益的补充时才使用。

转载于:https://www.cnblogs.com/Outyua/p/4716328.html