响应式布局

下面的样式会在可视区域的宽度小于 600px 的时候被应用。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

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

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

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

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

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

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

下面的样式会在 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分类

响应式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标签。

响应式布局辅助类样式

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

posted @ 2015-08-09 20:46 Outyua 阅读(355) 评论(0) 编辑收藏举报

刷新页面返回顶部

Outyua