html - 响应式导航(仅CSS)

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

对于此示例，我需要一个导航栏：https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_dropdown

最佳答案

您可以在任何屏幕尺寸下给任何元素完全不同的样式。只需使用媒体查询：

@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

关于html - 响应式导航(仅CSS)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42914529/