HTML/CSS 导航菜单：桌面侧；手机全屏答案

【问题标题】：HTML/CSS navigation menu: side on desktop; fullscreen on mobileHTML/CSS 导航菜单：桌面侧；手机全屏
【发布时间】：2020-04-11 17:44:19
【问题描述】：

我有一个带有固定侧导航菜单的网站（它是新的，我现在只是在做设计，所以请原谅无意义的内容）。

这在大型显示器上运行良好。但是，在移动显示器上，侧边导航和内容无法同时显示在屏幕上。

我想要的安排是：

在大屏幕上，出现侧边导航栏，占据部分屏幕宽度
在小屏幕上，侧面导航栏被固定在屏幕顶部的单个按钮所取代，这会导致导航栏全屏显示

我有大屏幕部分工作，但我不确定如何实现小屏幕部分，或者即使有可能。

这是我的代码的相关部分：

#side-menu {
  height: 100%;
  width: 300px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #2196F3;
  overflow-x: hidden;
  padding-top: 20px;
}

#main-content {
  margin-left: 300px;
  padding: 10px;
}

#side-menu a {
  padding: 6px 8px 6px 16px;
  width: 100%;
  text-decoration: none;
  font-size: 16px;
  color: white;
  display: block;
}

<link rel="stylesheet" href="./index.css" />

<div id="side-menu">
  <h1>Site Title</h1>
  <a href="#">Navigation link 1</a>
  <a href="#">Navigation link 2</a>
  <img src="example.jpeg">
</div>

<div id="main-content">
 <h1>The main content goes here
</div>

任何帮助表示赞赏，谢谢！

【问题讨论】：

标签： html css mobile navigation

【解决方案1】：

您可以使用@media 规则来执行此操作。您可以将这段代码添加到您的 CSS 文件中：

@media screen and (max-width: 600px) {
  #side-menu {
    ...
  }
}

(max-width: 600px) 只会将您指定的样式应用于其中的元素，适用于宽度为 600 像素及以下的设备。

希望我的回答对你有帮助

【讨论】：