如何在浏览器缩小或增大时更改 div 的内容

Question

我有一个我一直试图解决的难题。

我有一个网站，其宽度会根据浏览器大小而缩小。但问题是它只能低至 1000 像素，因为任何低于此的值都意味着菜单将与徽标重叠并且看起来不漂亮。

我可以做的一件事是一起更改设计，但这需要时间，因为我已经在当前设计上花费了无数时间。

我实际上是为 iPad 和移动用户设计的，基本上我希望根据可用的 space 减少菜单项的数量。

比如我有下面的菜单项（Home,about,services,products,faq,contact us），当它遇到比较小的宽度的时候，应该去掉products,faq and contact us放置一个菜单图标，用户可以单击该图标并查看剩余的菜单项。

以下是我目前拥有的：

 <div id="menu">
     <a href=index.php>Home</a>
     <a href=about.php>About</a>
     <a href=services.php>Services</a>
     <a href=products.php>products</a>
     <a href=faq.php>FAQ</a>
     <a href=contact.php>Contact</a>
 </div>

Answer 1

您应该考虑使用媒体查询。这篇 Mozilla 开发人员文章将对您有很大帮助，https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries。它基本上通过在您设置的条件下显示某些内容来工作。例如，如果屏幕小于 1000 像素，则显示一个 div，如果屏幕更大，则显示另一个。如果您需要额外的支持来设置它，我很乐意提供帮助。

Answer 2

如果你想保持简单，你可以使用css媒体查询，当浏览器低于[=14时，这应该将display:none;添加到class hide-from-menu =]分辨率

css

@media screen and (max-width: 1000px){ /* or some else breakpoint*/ 
  .hide-from-menu{
    display:none;
  }
}

HTML

 <div id="menu">
 <a href="index.php">Home</a>
 <a href="about.php">About</a>
 <a href="services.php">Services</a>
 <a class="hide-from-menu" href="products.php">products</a>
 <a class="hide-from-menu" href="faq.php">FAQ</a>
 <a class="hide-from-menu" href="contact.php">Contact</a>
 </div>

如何在浏览器缩小或增大时更改 div 的内容

How do i change the content of a div when the browser is reduced or increased

html

css

width