Вот что вы можете сделать, чтобы ваш сайт реагировал на экран разных размеров:
1) Вам нужно писать медиа-запросы для обработки разных разрешений, так как простое добавление процента не всегда будет работать на всех размерах экрана. Пример использования медиа-запросов в CSS следующий:
Допустим, у вас есть компонент, у которого есть класс 'abc', содержащий атрибут шириной 50%. Но проблема в том, что когда вы будете просматривать этот элемент на меньшем экране (например, на экране мобильного устройства), этот элемент будет слишком сжатым, и все будет грязно. Что вам нужно сделать, так это переключить ширину на 100% в зависимости от размера экрана, на котором она просматривается.
.abc{
width: 50%;
}
@media screen and (max-width: 400px) {
.abc{
width: 100%;
}
}
@media screen and (max-width: 800px) {
.abc{
width: 70%;
}
}
поэтому здесь медиа-запрос говорит браузеру применить ширину 50% к элементу, реализующему класс 'abc', но если максимальная ширина устройства составляет 400 пикселей (например, это может быть мобильное устройство или другое устройство меньшего размера), тогда сделайте ширину 100% от тот же класс. так же, как с 800px. Вы можете реализовать несколько медиа-запросов на основе вашего бизнес-кейса для обработки реагирования.
Дальнейшее объяснение можно найти здесь о медиа-запросах.
2) Вы можете просто использовать любую внешнюю отзывчивую библиотеку CSS, например, загрузчик твиттера.
Он работает в 12-сеточной системе, то есть логически делит каждый экран на 12 столбцов. У него есть определенные классы CSS для разных размеров экрана, например очень маленький (xs), маленький (sm), средний (md) и большой (lg). Ниже приведен пример того, как вы можете применить их к своим элементам
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"></div>
Приведенная выше реализация сказала бы браузеру отображать этот элемент в полных 12 столбцах, если ширина экрана очень мала или мала, отображать элемент в 6 столбцах (1/2), если размер экрана средний, и отображать div в 4 столбцы (1/3), если их существа отображаются на большом экране.
Дополнительную документацию о том, как использовать начальную загрузку, чтобы сделать элементы отзывчивыми, можно найти здесь