Как изменить содержимое div при уменьшении или увеличении браузера

Question

У меня есть дилемма, которую я пытался сортировать.

У меня есть сайт с шириной, которая сжимается в зависимости от размера браузера. Но проблема в том, что она может достигать всего лишь 1000 пикселей, поскольку что-то меньшее, чем это будет означать, что меню будет перекрывать логотип, и это выглядит не очень красиво.

Одна вещь, которую я мог бы сделать, - это изменить дизайн вместе, но это займет время, поскольку я потратил бесчисленные часы на этот текущий дизайн.

Я на самом деле проектирую для iPad и мобильных пользователей, и в основном я хочу, чтобы пункты меню уменьшались в зависимости от доступного пространства.

Например, если у меня есть следующие пункты меню (Главная, о, услуги, продукты, faq, свяжитесь с нами), когда он встречает меньшую ширину, он должен, вероятно, избавиться от продуктов, faq и связаться с нами и поставить значок меню, который пользователи могут щелкнуть и посмотреть остальные пункты меню.

Ниже то, что я в настоящее время:

<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. Он в основном работает, показывая определенный контент в условиях, которые вы установили. Например, если экран меньше 1000px показывает один div, и если он больше показывает другой. Если вам нужна дополнительная поддержка, я буду рад помочь.

Answer 2

если вы хотите сохранить его простым, вы можете использовать CSS медиазапросы, это должно добавить display:none; к классу hide-from-menu, когда браузер ниже 1000px разрешения

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>