响应式导航(仅限CSS)

Question

如何创建智能手机的垂直导航栏和桌面的水平导航栏？

本例需要一个导航栏：https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_dropdown

Answer 1

您可以在不同的屏幕大小下为任何元素赋予完全不同的样式。只需使用媒体查询：

@media (max-width: 768px /* Styles for 768px screen size and smaller */) {
   .element {
      background: red;
   }
}

@media (min-width: 768px /* Styles for 769px screen size and larger */) {
   .element {
      background: blue;
   }
}

这里有一个有用的链接：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

使用媒体查询。有了这些，你就定义了一个断点。在每个中断点内，您可以将不同的css规则分配给div等。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

在此示例中，您只需将宽度更改为100%即可获得所需的效果。但是在你需要的中断点的媒体查询中这样做，这样你就有了两个+样式，这取决于屏幕的大小。

example css