响应式导航（仅限 CSS）

【问题标题】：Responsive Navigation (CSS only)响应式导航（仅限 CSS）
【发布时间】：2017-03-20 21:45:32
【问题描述】：

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

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

【问题讨论】：

【解决方案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

【讨论】：

【解决方案2】：

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

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

使用此示例，您只需将宽度更改为 100% 即可获得所需的效果。但是在您需要的断点处的媒体查询中执行此操作，这样您就有两种 + 样式，具体取决于屏幕大小。

example css

【讨论】：