Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。
@media screen and (max-width: 600px) { .class { background: #ccc; } }
如果你想链接到一个单独的样式表,把下面的代码放在<head>标签里。
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。
@media screen and (min-width: 900px) { .class { background: #666; } }
Multiple Media Queries
你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } }
Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。)
@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标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
引入Bootstrap响应式样式表,即可启用响应式CSS。
<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响应式设计类样式,避免创建同一个站点的不同版本。当这些类样式能对每种设备的展示做有益的补充时才使用。