Каждый раз, когда вы используете фиксированную ширину в пикселях, ваши элементы останутся с таким размером и не будут реагировать.
Быстрое и простое решение для этого - переключиться на ширину в процентах, что говорит элементупропорция размера его контейнера.Предполагая, что контейнер сам по себе отзывчив, тогда ваши элементы изменят размер в соответствии с шириной экранов.Вы должны делать это полностью через ваш CSS, так как любые фиксированные размеры, расположенные дальше по дереву элементов, могут помешать всему внутри реагировать.
Однако наивный процентный показатель часто не является идеальным решением, потому что вещи могутне выглядят правильно с такими же пропорциями при меньших размерах экрана.Например, макет из трех столбцов может уменьшиться, но на маленьком экране мобильного телефона он будет выглядеть очень сжатым.
Существует множество решений для этого, и точный ответ будет зависеть от дизайна вашей страницы.и ваши предпочтения.
Прежде всего, рассмотрите возможность использования min-width и max-width с размерами пикселей, чтобы ограничить размеры ваших элементов.Эти значения CSS будут переопределять процент, если процентное значение заставляет их идти выше или ниже указанной вами максимальной или минимальной ширины.Это может быть полезно для предотвращения чрезмерного сдавливания или растяжения предметов, в то же время отвечая соответствующим образом в нужном диапазоне.
Далее вам необходимо знать о медиазапросах.Это функция CSS, которая позволяет вам указать CSS, который применяется только тогда, когда размер браузера находится в пределах указанного диапазона.(Медиа-запросы могут сделать намного больше, чем это, но я предоставлю вам дальнейшее их изучение)
Здесь может помочь пример:
@media(max-width:600px) {
.container {
grid-auto-flow: unset;
grid-auto-columns: unset;
}
}
В приведенном выше примере используетсяМедиа-запрос, чтобы отключить ваши столбцы, если ширина браузера 600 пикселей или меньше.Для узких браузеров макет на основе столбцов может не подходить, поэтому переключение с него при низких разрешениях часто является хорошей идеей.