在移动设备上占据100％屏幕的菜单，而不是桌面设备？

Question

因此，这更像是网页设计的一般性问题。

我们假设我想要制作一个汉堡包菜单，在活动时，它占据桌面屏幕宽度的25％，但是移动屏幕宽度的100％。

这是如何实现的？

Answer 1

使用media queries

所以，例如

.menu {
    width: 100%;
}

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

该代码意味着类menu的元素宽度为100％，除非您的屏幕宽度至少为500px，在这种情况下宽度将为25％。