Mobile First 响应式布局中媒体查询顺序搞反了怎么办？
我按照 Mobile First 的思路写 CSS，先写移动端样式，再用 min-width 媒体查询加桌面端样式。但发现大屏上的样式没生效，反而被小屏的覆盖了，是不是顺序写错了？
比如下面这段 JS 里动态插入的样式，也是按从小到大的断点加的，但效果不对：
const style = document.createElement('style');
style.innerHTML = <code>
.card { padding: 8px; }
@media (min-width: 768px) {
.card { padding: 16px; }
}
@media (min-width: 1024px) {
.card { padding: 24px; }
}
</code>;
document.head.appendChild(style);
难道 Mobile First 不是这样写的吗？还是说媒体查询的顺序其实不影响？
1 条解答
检查两点：1）你是不是误用了 max-width 而不是 min-width；2）实际加载的代码顺序是不是真的跟写的一样（有些构建工具可能会合并压缩改变顺序）。
如果确认都是 min-width 且顺序正确，那问题不在媒体查询这儿，可能是选择器优先级或者其他 CSS 覆盖了你的样式。