前一阵子把BootStrap系统的学习了一下，深受响应式布局的吸引，于是搜集了很多响应式布局的资料，做了一下简记。
响应式布局的演示
响应式的概念由Ethan Marcotte在2010年5月25日提出，他的文章中已经完美的讲述了什么是响应式布局的设计，并且还列举了一个不断改进的案例。
案例
没有用响应式的案例：点击查看
使用媒体查询改进过的案例：点击查看
使用媒体查询对大屏的处理：点击查看
使用媒体查询进行再进一步优化：点击查看
文章中提到了响应式布局的核心，就是媒体查询
简单的概括一下媒体查询
@media tv and (min-width: 700px) and (orientation: landscape) {
...
}
例如上面的代码，意味着在媒体类型为tv，可视区域不小于(min-width)700px，并且是横屏(landscape)的时候大括号中规定的CSS代码才生效。
除了上面的这种方式还支持其他的外部引入方式，例如：
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
href="shetland.css" />
@import url("shetland.css") screen and (max-device-width: 480px);
媒体查询需要在CSS中添加一个表达式，表达式返回true和false，如果为true，表达式中的CSS将会被使用，尽管表达式为false，<link> 标签指向的样式表也将会被下载(但是它们不会被应用)
逻辑操作符
and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。
not操作符用来对一条媒体查询的结果进行取反。
only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。
若使用了not或only操作符，必须明确指定一个媒体类型。
@media not screen and (color), print and (color)
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于or操作符。
媒体查询的语法：CSS媒体查询-伪范式
媒体属性：CSS媒体查询-媒体特征
详细的媒体查询教程：点击查看
除了媒体查询以外BootStrap4还使用了Flex布局这种非常舒服的弹性布局方式
Flex布局学习：微信小程序Flex布局文档
viewport视口
BootStrap文档中强调要使用响应式布局要引入一个响应式元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
这里就涉及到了视口的概念
参考文档：浅谈移动端中的视口（viewport）
有三种视口：布局视口、视觉视口、理想视口
在移动设备查看某些网页的时候是可以缩放的，缩放的时候总有一部分在页面上就看不见了，但是那一部分看不见的他实际还是存在的，整个网页就是布局视口，手机屏幕上能看见的那一部分为视觉视口
理想视口
苹果和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。
一般情况下来说，理想视口无论用户怎么缩放，都不会有超出屏幕的部分，也就是没有上面布局视口中的那种情况，所以响应式只能在理想视口中表现出来，这就是为什么BootStrap要说明开头要引入响应式元数据标签
<meta name="viewport" content="width=devide-width">
下面是百度移动版网页中默认设置的视口：
<meta name="viewport"
content="width=device-width,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
minimum-scale 最小缩放比例
maximum-scale 最大缩放比例
user-scalable=no 禁止用户对当前页面进行缩放
断点的选择
BootStrap的断点的选择用了下面的尺寸：
参考文档
0-576px 超小屏幕（BootStrap默认断点）
576px-768px 小屏幕
768px-992px 中等屏幕
992px-1200px 大屏幕
≥1200px 特大屏幕
响应式中常用的长度单位
px 基本的像素
em 相对长度单位 参考父元素的font-size，如果父元素没有设置font-size，就会一直往上找，直到找到html标签为止，如果html也没有设置font-size，默认就是1em = 16px
rem 直接参照物为html标签，不会随着父元素中font-size的改变而改变，相对于em来说更加容易控制，当html标签中没有设置font-size的时候1rem = 16px，与em一致
使用相对单位长度的优点是，调整一个元素的font-size的时候，这个元素的所有使用了相对长度单位的子元素的大小，间距等方面都会跟随父元素改变，比如说使用了rem，那么调整了html的font-size，整个页面的单位长度都会变化。
html {
/* 将rem的大小变为1rem=10px */
font-size: 62.5%;
}
判断浏览器是否支持rem功能：Can I Use
媒体查询中的断点如果使用rem，永远是默认的1rem=16px，既然如此的话媒体查询使用断点的时候可以直接使用px或者em，因为rem可能会有兼容性的bug
CSS resets：Normalize.css
CSS resets用来统一标签的样式，BootStrap的Reboot和Normalize.css都是做的CSS resets
主要的作用就是方便用户进行样式的开发，所有的元素都一视同仁，没有带有特殊样式的元素。Normalize.css符合现代标准。它只针对需要规范化的样式。
对兼容性的设置
<meta http-equiv="x-ua-compatible" content="ie=edge">
以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
下面代码可以在用户使用了低版本的IE浏览器，给出一个友好的提示：
<!--[if lte IE8]>
做提示信息的HTML代码，一般提示信息为让用户去下载高版本的浏览器
<![endif]-->
网页设计的策略
progressive enhancement 渐进增强
参考文档：
graceful degradation 优雅降级
参考文档：MDN术语表-优雅降级
开发中是先做大屏幕还是先做小屏幕，这一点一般由用户群体来决定，如果用户群体手机端比较多，就先做小屏幕。