Mobile First布局中侧边栏在桌面端也隐藏了怎么办？
我在用Mobile First原则设计布局时遇到问题，侧边栏在移动端应该隐藏，桌面端显示。但按下面的代码写完后，侧边栏在桌面端也消失了，这是为什么？
.sidebar {
display: none; /* 默认隐藏移动端 */
}
@media (max-width: 768px) {
.sidebar {
display: block; /* 桌面端显示？*/
}
}
我原本以为通过媒体查询覆盖display属性就能实现，但测试时无论手机还是电脑都看不到侧边栏。试过把条件改成min-width也没用，控制台没有报错但样式就是不对，是不是媒体查询的方向搞反了？
2 条解答
max-width: 768px，这个条件的意思是「当屏幕宽度小于等于768px时」应用里面的样式。而你的注释写的是「桌面端显示」，但实际代码里却是在小屏上设置display: block，这跟你的需求完全反了。Mobile First 的核心思想是先写移动端的样式，然后通过
min-width的媒体查询逐步增强到更大屏幕。所以你的代码应该改成这样：这样，侧边栏在小屏设备上默认隐藏，而在桌面端（宽度达到768px及以上）才会显示。
如果你还是觉得不对劲，可以用浏览器的开发者工具调试看看。选中侧边栏元素，检查它的样式计算结果，确认到底是哪个CSS规则生效了。很多时候问题就是某个优先级更高的样式覆盖了你的预期，或者媒体查询条件没写对。
最后提醒一下，写代码时注释要和实际逻辑一致，不然自己回头调试都会懵圈。我以前就经常因为注释写错浪费时间，真是自坑啊。
.sidebar默认是隐藏的，你希望桌面显示，那就要在桌面的媒体查询里改样式。当前你写的是在max-width: 768px时显示，也就是只在手机端生效，桌面不会触发，所以侧边栏一直没显示。你应该改成这样：
或者你想让桌面和移动端都显示，那就不需要媒体查询，直接
display: block就行了。检查下你是不是在写反了条件，或者把样式覆盖掉了。用浏览器调试工具看看元素应用了哪些样式，就知道问题出在哪了。