Desktop First 布局在小屏上怎么处理才不崩？
我用 Desktop First 写了个布局，大屏看着没问题，但一到手机上整个页面就乱套了，元素堆叠、溢出啥的都有。
我已经写了几个 @media (max-width: 768px) 的断点，但感觉越调越乱。比如下面这个容器：
.main-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 24px;
}
在桌面端很舒服，但移动端根本放不下左边那 250px 的侧边栏，该怎么优雅降级？是不是得完全重写结构？
1 条解答
pre class="pure-highlightjs line-numbers">
@media (max-width: 768px) {.main-layout {
grid-template-columns: 1fr;
}
}