Как сделать сайт, который будет хорошо смотреться на любом устройстве

Последнее обновление:
26.12.2023

Время чтения: 6 мин

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

Вот простой пример CSS кода резиново-адаптивного сайта:

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

}



.container {

    width: 100%;

    max-width: 1200px;

/* Максимальная ширина контейнера */

margin: 0 auto;

/* Центрирование контейнера */

padding: 20px;

}

/* Для больших экранов (ширина 1200px и выше) */

@media (min-width: 1200px) {

    .container {

        padding: 40px;

    }

}

/* Для средних экранов (ширина 768px - 1199px) */

@media (min-width: 768px) and (max-width: 1199px) {

    .container {

        padding: 30px;

    }

}

/* Для маленьких экранов (ширина менее 768px) */

@media (max-width: 767px) {

    .container {

        padding: 20px;

    }

}

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

Как сделать резиновую верстку?

1) Используй относительные единицы измерения, такие как rem и vw - задают ширину элементов в зависимости от размера окна браузера. Это позволяет избежать проблем с масштабированием
2) Cвойства max-width и min-width позволяют ограничить максимальную и минимальную ширину элемента
3) Тестируй свой сайт на разных устройствах