html - 响应式导航(仅限 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