响应式布局—— @media 媒体查询
思路
需要理解的几个概念：
- 大屏优先，小屏优先。
所谓大屏优先还是小屏优先，它的意思就是原本你的这套布局样式默认情况下是大屏样式还是小屏样式，即不使用 @media 媒体查询下的样式。 - max-width，min-width。
屏幕值是变化的，这两个值就是用来设置查询断点的，当 min-width < x < max-width 时符合条件。 - 什么时候用 max-width，什么时候用 min-width ? 断点由上往下是从大到小，还是从小到大？
这是初学者容易迷糊的问题，但其实算不上问题，在实践中就能理得非常清楚，这里总结下思路：- 判断大屏优先还是小屏优先。这个简单，以大屏优先为例，也就是说我们写的默认样式是为大屏服务的。
- 那么接下来我们考虑的就是小屏时的特殊布局，以覆盖原样式。那么自然我们的 @media 媒体查询所使用到的查询逻辑是 “小于某个更小的断点”，也自然是使用的 max-width，断点也是依此减小的。
- 反之
复盘
这似乎是一个很简单的问题，按流程捋一遍就能理解清楚，或者在实践中也是自然而然就能完成的问题。但是，如果眼高手低，去凭空想象、去钻牛角尖，即使能达到同样的效果，也是事倍功半。
这里再记录下钻牛角尖的过程：
当我知道有媒体查询这个东西后，我就去想象使用 min-width 的时候，从上到下断点是越来越大还是越来越小，使用 max-width 的时候又是什么情形。我钻牛角尖地去类比了条件分支，(其实这个覆盖的逻辑和条件分支并不一样)，以 min-width 为例，
它是指大于某个断点，
先判断大于大的值还是先判断大于小的值，
如果先判断大于大的值，那么接下来大于小的值的情况也会覆盖掉
所以是先判断大于小的值
进去推断出使用 min-width 的时候从上到下，断点应该是越来越大。
更深层次地看这个过程，就是当没有理解真正需求和使用场景时，对一些知识的掌握和理解会比较混乱。如果再次遇到此类问题，不要再钻牛角尖，去实践去以解决问题为先，在解决过程中也会更深的理解问题。