思路
需要理解的几个概念：
- 大屏优先，小屏优先。
所谓大屏优先还是小屏优先，它的意思就是原本你的这套布局样式默认情况下是大屏样式还是小屏样式，即不使用 @media 媒体查询下的样式。 - max-width，min-width。
屏幕值是变化的，这两个值就是用来设置查询断点的，当 min-width < x < max-width 时符合条件。 - 什么时候用 max-width，什么时候用 min-width ? 断点由上往下是从大到小，还是从小到大？
这是初学者容易迷糊的问题，但其实算不上问题，在实践中就能理得非常清楚，这里总结下思路：- 判断大屏优先还是小屏优先。这个简单，以大屏优先为例，也就是说我们写的默认样式是为大屏服务的。
- 那么接下来我们考虑的就是小屏时的特殊布局，以覆盖原样式。那么自然我们的 @media 媒体查询所使用到的查询逻辑是 “小于某个更小的断点”，也自然是使用的 max-width，断点也是依此减小的。
- 反之
复盘
License
本文由 holwell 原创，采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
Share
