CSS 响应式布局

• 例子：
• 起源：为了让网页适配移动端，使得网页在不同设备上正常使用，一般主要处理屏幕大小问题。
• 优点：解决了设备之间的差异化展示（让不同的设备达到最优的视觉体验）
• 缺点：兼容性代码多，工作量大，加载速度受影响。对原有网站布局会产生影响，用户判断未必精确。

设计原则

• 移动优先：在设计的初期就要考虑的页面如何在多终端展示
• 渐进增强：充分发挥硬件设备的最大功能（比如：IE8以下不支持CSS3，但我们也要设计CSS3的，要让支持的用于享受到最完美体验）

如何实现

• viewport：使网页适配移动端，一般新建html文档时都自带了，不用自己手动输入（例子）
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  • width=device-width：将页面宽度width设为 屏幕区域大小device-width（注意区分 页面 和 屏幕 ，device-width只和设备有关系）,使页面和屏幕的宽度进行匹配。（如果不加这个，那么很多手机上网页的默认宽度使980px，然而手机只有这么大却要显示980个像素，看起来页面就被缩小了很多。）
  • initial-scale：表示初始的缩放比例
• CSS3 Media Query 是最简单的方式，根据页面大小的范围匹配不同的样式。
• 如果需要更加精确的控制页面效果则要通过js来动态控制根元素font-size的大小，纯css没办法确保各个宽度浏览器等比例复现设计稿，但借助原生Javascript成本高，不推荐使用
  • 参考大佬的博客《适合响应式网站的 rem 解决方案，完美复现设计稿》，借助js实时获取页面宽度来设置rem大小，以此实现元素大小随页面大小变化，确保不同大小浏览器的元素和浏览器的比例与设计稿一致
• 第三方开源框架（比如bootstrap） 可以很好的支持浏览器响应式布局的设计

CSS3 Media Query

• 根据不同的设备给予不同的展示

常见属性

• device-width，device-height 屏幕宽高（注意区分“屏幕”与“窗口”）
• width，height 渲染窗口宽高(物理上的可视窗口宽高)
• orientation 设备方向（横/竖）
• resolution 设备分辨率

media的使用（语法）

• 具体语法可参考菜鸟教程 CSS3 @media 查询
• @media可以针对不同的屏幕尺寸设置不同的样式
• 语法：
  • 外联样式表：<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
  • 内嵌样式表:@media mediatype and|not|only (media feature) {CSS-Code;}
  • 媒体类型：
    • all 用于所有设备
    • print 用于打印机和打印预览
    • screen 用于电脑屏幕，平板电脑，智能手机等。
    • speech 应用于屏幕阅读器等发声设备
  • 媒体功能：可参考菜鸟教程
• 注意：media的规定规则中区分 媒体类型 和 媒体功能 ，比如screen和max-width 是定义输出设备中的 页面 最大可见区域宽度。而 媒体功能中max-device-width 才是 定义输出设备的 屏幕 最大可见宽度。
• 例子：

---

bootstrap

• 注意： bootstrap是高度组件化的，尽量使用他提供的，不要自己尝试重新开发
• 核心：栅格化布局
• 优点：可快速搭建网站
• 缺点：需要加载大量额外代码，性能不高
• 实际工作中使用media是不够的，框架可帮助我们解决低端浏览器不支持CSS3的问题
• bootstrap是移动优先的前端框架，写非常少的代码即可实现多终端的页面适配。
• 使用：可以下载编译后的源码/使用CDN
• 使IE8支持media： bootstrap基本适配所有的浏览器，唯独IE8 需要 Respond.js 配合才能实现对媒体查询（media query）的支持。
  • 注意：这个Respond.js必须部署在web server（网站）的域名下，不能是在静态资源域名下，会存在跨域的问题（具体可参考bootstrap官网）

官方例子

官方例子:

CSS样式、组件介绍

设置padding（.container ）

• Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，以便为其赋予合适的排列（aligment）和内补（padding）（官方参考）

栅格系统（列布局）

• 栅格系统
• 栅格系统的简介中有提到：“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）”（官方参考）
• 可以通过栅格参数理解Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
  • 类前缀：手机.col-xs-、平板.col-sm-、桌面显示器.col-md-、大桌面显示器.col-lg-
• 中等屏幕（桌面显示器）应用.col-md-前缀（实例：从堆叠到水平排列）：
• 如果不希望在换到小屏幕后12列堆叠（像上面的例子那样），可以使用.col-xs-* 和 .col-md-*前缀（实例：移动设备和桌面屏幕）（注意：3比2的比例来设置xs和md）

浮动、清除浮动（辅助类）

• bootstrap提供了快速浮动的 辅助类，我们可以借助他实现float的效果
• 通过为父元素添加.clearfix 类可以很容易地清除浮动
• 例子：下面“实际案例”的“做侧边栏响应式”中，给按钮的父元素增加了.pull-right使得按钮浮动在右边

不同设备展示/隐藏某些内容

• 通过单独或联合使用bootstrap提供的响应式工具以列出的类，可以针对不同屏幕尺寸隐藏或显示页面部分内容。
• 例子：下面“实际案例”的“做侧边栏响应式”中，给按钮的父元素增加了.visible-xs-*使得按钮只在极小屏幕下可见

---

Button

• bootstrap中的按钮有预定义样式，并且可以在不同屏幕中使用不同尺寸

组件

• bootstrap提供了很多现成的组件
• 注意：我们自己定义的class名需要避免与组件本身的class样式产生冲突。

实际案例

• 使用bootstrap只需要很少的代码即可呈现很棒的效果

• 实现效果：

  • 传统2列布局在电脑上的显示效果：
  • 模拟平板宽度:
  • 模拟手机宽度：

• 栅格系统的简介中有提到：“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）”

• 所以想让导航栏有padding可使用官方提供的.container 类作为父元素

顶部导航

使用bootstrap提供的**nav 组件，使用.container 容器**包裹nav组件使其有padding：

侧边导航

1. 使用bootstrap提供的**列表组**
2. 将 列表组 放在 栅格系统 中（注意使用**.container 容器**包裹 栅格系统 使其有padding）分成9:3,9的部分留着放网站主体，3用来放侧边导航

巨幕

在栅格系统的9中，使用bootstrap提供的**巨幕**

主体部分

• 实现效果：每篇文章在不同大小的屏幕中都显示同样的宽度
• 在 栅格系统 的左列中嵌套栅格系统：
• 目前实现的效果：

做侧边栏的响应式

• 此时将页面宽度缩小，可发现需要一个侧边栏的响应式（按钮）：
•