Запретить применение определенных элементов css при использовании медиазапроса

Question

Я сейчас пытаюсь сделать свой сайт отзывчивым, но не знаю, как продолжить. У меня есть панель навигации с тегами <ul> и <li>, для которых я установил некоторые аргументы в моем css. У меня вопрос: смогу ли я отключить эти аргументы, когда достигну определенной ширины на сайте?

Answer 1

Да, конечно! Вы можете использовать медиа-запросы для создания разумных точек останова для ваших макетов и интерфейсов. Эти точки останова в основном основаны на ширине области просмотра. Например:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { 
li {
    padding: 0.5rem 0;
    &:first-child {
      padding-top: 0;
    }
  }
}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { li {
    padding: 1rem 0;
    &:first-child {
      padding-top: 1rem;
    }
  }}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width