Html 在手机上占据100%屏幕而不是桌面的菜单？

所以这对于网页设计来说是一个更普遍的问题

假设我想构建一个汉堡包菜单，当它处于活动状态时，占据桌面屏幕25%的宽度，但却占据移动屏幕100%的宽度

这是如何实现的？

使用

比如说

.menu {
    width: 100%;
}

@media (min-width: 500px) {
    .menu {
        width: 25%;
    }
}

---

该代码将意味着类

菜单的元素宽度将为100%，除非您的屏幕宽度至少为500px，在这种情况下，宽度将为25%。
媒体查询..这太宽了。请查看引导程序及其工作方式。这将使您很好地了解某个特定库如何处理此问题。