Медиа-запрос CSS: как сделать сайт адаптивным

Медиа-запросы — это самая важная концепция CSS в наши дни. Поскольку большинство пользователей используют свои телефоны или планшеты для посещения веб-сайтов. В наши дни важно сделать сайт адаптивным.

Что такое адаптивный веб-сайт?

Мы все слышали, что адаптивный веб-сайт важен или вашему клиенту нужен адаптивный веб-сайт, но в конечном итоге что это означает? Отзывчивый веб-сайт — это термин, который означает, что ваш веб-сайт хорошо выглядит на настольном компьютере, мобильном телефоне или планшете.

А чтобы сделать сайт адаптивным с помощью CSS, мы используем @mediaмедиа-запросы.

Медиа-запрос

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

Для адаптивного веб-сайта мы чаще всего используем два условия:

• max-width: это означает, что если вы говорите, max-width: 576px следующий стиль будет применяться только тогда, когда ширина окна просмотра составляет 576 пикселей или меньше.

• min-width: Это обратное max-width. Это означает, что если вы говорите, min-width: 576px то следующий стиль будет применяться только тогда, когда ширина порта просмотра составляет 576 пикселей или более.

Действительно, в зависимости от того, с чего вы начнете, сначала для настольного компьютера могут потребоваться:

@media (max-width: 1200px)
@media (max-width: 992px)
@media (max-width: 768px)
@media (max-width: 576px)

В то время как для мобильных устройств сначала вы можете иметь:

@media (min-width: 576px)
@media (min-width: 768px)
@media (min-width: 992px)
@media (min-width: 1200px)

Я обычно придерживаюсь этих величин.