响应式篇

前言

响应式是一种新的技术手段，使得网站能够针对不同的设备环境进行响应和调整，以实现一个页面对多个终端的兼容。在移动优先的时代，显得尤为重要了。

• 响应式是理念，而不是功能。Bootstrap把响应式放在了框架图的左部，覆盖了所有的css组件。
• 利用媒体查询来实现不同物理尺寸下的css展示。
• 重要的是做好前期规划，制作不同分辨率的展示稿，让代码和功能能够灵活的使用。对页面进行清新的划分，然后以模块来规划响应式的页面制作。
• Bootstrap的实现说明：Bootstrap是通过定义容器的大小，平分12分，再调整内外边距，最后结合媒体查询，实现了强大的栅格（网格）系统。基础是栅格系统，然后是基础布局组件，上面是18个css组件，实现响应式的。
• 可以分析Bootstrap里面优秀的写法，来实现对移动端更好的兼容，可以作为范例来学习。

先来2个demo:
1. 响应式组件1
2. 可调整的导航条

先感受一下，调整浏览器大小，或者打开浏览器的响应式，移动端没有测试，不建议。
然后简单看下实现，还是很简单的。

响应式

媒体查询

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

对于IE9及其以下的浏览器，不支持h5,还css3的媒体查询，Bootsrtap的解决方案是:

<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->

利用css的条件查询，引入html5shiv.js和respond.js.
前者提供h5的支持
后者提供了媒体查询的支持.
为了对h5有更好的支持，Bootstrp还引入了normalize.css，对h5的标签进行基本的声明，使得不支持的浏览器也能很好的解析h5的标签。

---

css中@media的使用，媒体的特性很多，这里主要使用了max-width,min-width等与屏幕尺寸有关的特性。将同样的样式写在media外面，都有显示的样式。

.col {
  padding: 2rem 1rem;
}
.col + .col {
  border-top: 1px solid #dfe1e8;
  background-color: #f7f7f9;
}



@media screen and (min-width: 38em) {
  .col {
    padding: 2rem;
  }
}
@media screen and (min-width: 48em) {
  .section {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-bottom: 1px solid #dfe1e8;
  }
  .col {
    display: table-cell;
    padding: 3rem;
    vertical-align: top;
  }
  .col + .col {
    border-top: 0;
  }
}

如代码所示，将特定的代码放在了@media内，根据媒体查询的尺寸，符合尺寸定义内部的css起作用，调整了页面的样式，这是实现响应式的关键。

• 多个media内的css最终只有一个起作用。
• 还有后面定义的css属性可以覆盖前面定义的属性。
  媒体查询允许了网页宽度的自动调整

---

使用相对宽度。

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

  width: 50% | auto ;

---

使用相对的单位

• 不要使用px等绝对单位，使用em，rem等。
• 建议使用rem，根据html元素的大小作为比例基础。

---

布局

布局上要灵活，使用绝对定位要特别注意，可以考虑用flex布局实现。可以参见我的博客flex布局篇

---

css文件的选择加载

<link rel="stylesheet" media="screen and (min-width: 400px)"
href="smallScreen.css" >

@media screen and (min-width: 48em) {
}

---

响应式图片

img{
  max-width:100%;   
}

如果有不同分辨率的图片，可以加载不同分别分辨率的图片来实现更好的友好性。

<picture alt="image description">
  <source src="/path/to/medium-image.png" media="(min-width: 600px)">
  <source src="/path/to/large-image.png" media="(min-width: 800px)">
  <img src="/path/to/mobile-image.png" alt="image description">
</picture>

也可以用js通过获得屏幕的尺寸来加载对应的图片。

---

后言

  读完了《深入Bootstrap源码》，我会在后面的博客里陆续更新Bootstrap的css组件和js组件，在官方给出的Bootstrap源码里，有很多东西值得学习，学习写jQuery插件，css组件的写法，用sass写组件，更高级的单元测试也是可以逐行研究的，我对测试还是蒙的，会继续学习，grunt的用法，不过最近gulp基于流的应用好像更好理解，也更清晰的划分了插件的作用。