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

Question

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

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

<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; }

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

<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>

Не работает.

Answer 1

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

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

Answer 2

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

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;
    }
}

Здесь у вас есть кодекс!

Answer 3

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