响应式布局
是什么，为什么？
电脑显示器有很多种尺寸，常见的有，1366px（宽度）、1980px（宽度），高级点，还有 2k 屏、4k 屏、5k 屏。如果再考虑平板和手机的话，就更多了。
远古时期，大多数网站是不会考虑这个问题的，一般只会对特别流行的一个尺寸进行设计。这时候，屏幕特别小，或者特别大时，看着就很不舒服。
为了照顾小屏幕、高分屏（高分辨率屏），就有人提出来“响应式”这种概念。
笼统来讲，使不同尺寸、分辨率的屏幕，都能呈现出较好的效果，就是响应式布局。
还有一个概念叫“自适应”，从目的上讲，和“响应式”一样。但是码者不是一个那么严谨的人，这里就混作一谈来。
本文记录码者开发中使用过的几种自适应思路供同仁参考、讨论，以及批评。
最简单的方案（固定内容区宽度）
最简单的方法，就是给网页的内容区，设置一个宽度。比如 900px，然后内容区居中、两边留白。因为大部分电脑显示器的宽度都超过 900px，所以，不同的显示器的差异，仅仅在于两边“留白”的大小。
虽然很简单，但是确实效果不错。码者比较推荐这种方法，但可能是因为简单，很多人不屑于使用这种方法。
等比例缩放（rem）
这种方法的思路就是“大屏幕的字大点、小屏幕的字小点”。
其实这是一个看起来很合理的方法，但是在码者看来是今天所讨论的几个方法中，最 low 的方法。
因为很多时候，很难判定屏幕是大是小。
大与小，可以是像素的多与少，比如，1920px 宽的屏幕，比 1366px 宽的屏幕“大”；
但是，1920px 的屏幕有可能是 13 寸的，而 1366px 的屏幕有可能是 15.6 寸的。
也就是说，物理尺寸大的屏幕，像素尺寸可能更低。也就会出现这种情况：13 寸显示器上的字体比 15.6 寸的还小。实际体验上，有更多你想不到的 low 点。
但是在某些场景（比如移动端），还是很受用的。所以这里记录同比例缩放的一种实现方案——rem 方案。
不熟悉 rem 的同仁，可以参考这个简介
整体思路
- 给根节点设置一个字体大小
- 然后，其他尺寸单位全部用 rem
- 然后，监听屏幕的大小
- 然后，根据屏幕的大小按比例改变根节点字体的大小
因为 rem 的特性，其他的尺寸都是根据根节点字体的大小设定的，所以，根节点字体大小一变，其他所有尺寸都会按比例变大、或小。
大部分浏览器的字体有个最小值：12px。也就是缩小到 12px 后，字体不会继续缩小。
demo
最精准的方案（媒体查询，@media）
整体思路
@media起到的作用是，你可以给不同尺寸的设备，设置单独、互不影响的 css 属性。
- 比如：屏幕宽度小于 500px 时（手机屏幕），怎样怎样
- 宽度在 500px ～ 1000px 时（平板屏幕），怎样怎样
- 宽度在 1000px ～ 1500px 时（电脑小屏幕），怎样怎样
- 宽度在 1500px ～ 2000px 时（普通电脑屏幕），怎样怎样
- 宽度在 ……
demo
点评
不同于上一种方案，这种方案，看起来并不是很有用，但实际应用中，它才是响应式领域的霸主。因为，有一个叫“栅格系统”的东西。
栅格系统（主流方案）
没错，栅格系统的基础就是媒体查询和浮动布局。
但是由于栅格方案，比较复杂，于是决定日后单独记录一篇笔记。
应该使用哪一种方案？
遵循国际惯例：具体情况具体分析