Удаление определенного элемента списка при изменении размера (просмотр с рабочего стола на мобильный)

Можно ли удалить несколько элементов списка при изменении размера сайта для просмотра на мобильных устройствах?

У меня в панели навигации горизонтальное меню. Скажем, что-то вроде

<ul>
    <li><a href = "#">1</a></li>
    <li><a href = "#">2</a></li>
    <li><a href = "#">3</a></li>
    <li><a href = "#">4</a></li>
</ul>

На экране размером более 768 пикселей позволяет отображать все меню как есть, но как только размер становится ниже 768 пикселей, я бы хотел, чтобы ссылки 3 и 4 не отображались.

В css пробовал

m-re { display: none; }

и добавил класс к элементу <li>

<ul>
    <li><a href = "#">1</a></li>
    <li><a href = "#">2</a></li>
    <li class = "m-re"><a href = "#">3</a></li>
    <li class = "m-re"><a href = "#">4</a></li>
</ul>

Не работает.

Можете ли вы продемонстрировать, что нет работает --- потому что он должен, если вы являются используете медиа-запросы?

— 15.11.2018 17:41

Нет, не работает. Я пытался. При изменении размера отображаются все 4.

— 15.11.2018 17:44

Ладно, извини ... теперь работает. Я чувствую себя тупым.

— 15.11.2018 17:45

css html responsive-design media-queries

15.11.2018 17:38

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Были бы полезны медиа-запросы, вы можете прочитать о них здесь: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

15.11.2018 17:40

да, есть медиа-запросы это документация https://www.w3schools.com/css/css3_mediaqueries_ex.asp Однако вы можете сделать

@media screen and (max-width: 768px) {
  .m-re{
    display:none
  }
}

15.11.2018 17:41

Ответ принят как подходящий

Вы можете сделать это без использования классов, если хотите, попробуйте это

li:nth-child(3), li:nth-child(4){
  display: none;
}

А затем установите медиа-запрос для больших экранов

@media only screen and (min-width: 768px){
    li:nth-child(3), li:nth-child(4){
        display: block;
    }
}

Здесь у вас кодовый ключ!

Спасибо, Мартин. Я пробовал это в течение последних получаса, и это не сработало ... после того, как я попросил помощи по SO, а затем обновил свою страницу ... он начал работать. Можете, пожалуйста, посмотрите ответ Дэвида и дайте мне знать, какой из них лучше ...

— 15.11.2018 17:50

Это зависит от того, это другой способ сделать это, у вас есть возможность не использовать классы, но если вы хотите, это тоже будет нормально, еще одно отличие, я сделал это, используя mobile-first, это означает, что сначала вы должны это сделать работают для мобильных устройств, а для больших экранов, здесь у вас есть хорошая статья о мобильных устройствах, getflywheel.com/layout/…, вы можете увидеть разницу в медиа-запросе, он установил максимальную ширину, я установил минимальную ширину, это зависит от вас В самом деле.

— 15.11.2018 17:55

15.11.2018 17:45