6.响应式站点设计

概要

1. css媒体查询

2. 利用bootstrap实现响应式设计

   1、css的媒体查询

   一说到响应式设计，肯定离不开媒体查询media，因为媒体查询是响应式设计的核心。

   优点：

3. 面对不同分辨率设备灵活性强

4. 能够快捷解决多设备显示适应问题

   缺点：

5. 兼容各种设备工作量大，效率低下

6. 代码累赘，会出现隐藏无用的元素，加载时间加长

   设置meta标签

   大多数移动浏览器将html页面放大为宽的视图以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

   <meta name="viewport" content="width=device-width, initial-scale=1,
   maximum-scale=1, user-scalable=no">

   参数解释：

   width = device-width 宽度等于当前设备的宽度
   initial-scale 初始的缩放比例（默认设置为1.0）
   maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）
   user-scalable 用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩放）

   通过媒介查询来设置media queries

   media queries 是响应式设计的核心。
   media queries 能在不同的条件下使用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。 ```css /*
   1. 在手机端显示蓝色
   2. 在pad端显示绿色
   3. 在pc端显示红色 */ @media screen and (max-width:768px) { body { background-color: blue; } }

@media screen and (min-width:768px) and (max-width:992px) { body { background-color: green; } }

@media screen and (min-width:992px) { body { background-color: red; } } ```

2、利用bootstrap实现响应式设计

bootstrap是最受欢迎的html、css、js框架，用于开发响应式布局、移动设备优先的web项目。
bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格参数

通过下表可以详细查看bootstrap的栅格系统是如何在多种屏幕设备上工作的。