Как сделать так, чтобы мой сайт динамически изменял размеры элементов

Question

Я относительно новичок в веб-разработке, работаю над созданием веб-сайта с использованием React JS.

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

Как и все элементы, настраиваются на основе vh и vw, когда размер окна уменьшается / увеличивается по диагонали, однако, если vh остается неизменным, а vw изменяется, все заканчивается повсюду.

Существуют ли какие-либо плагины или что-нибудь связанное с ReactStrap, которые могут помочь мне добиться этого динамического c изменения размера и подгонки? ИЛИ я должен использовать такие инструменты, как WordPress, которые, кажется, автоматически решают эту проблему, а не я вручную пишу все HTML и CSS для сайта.

Спасибо

Answer 1

@ yolopolo Вы также можете сделать это, узнав, как сделать сайт адаптивным в зависимости от экрана устройства. Пожалуйста, проверьте это: https://www.w3schools.com/css/css_rwd_intro.asp

и протестируйте свою веб-страницу, реагируя, изучая * Device Mode в 101 Tools * Dev Device https://www.atlantic.net/hipaa-compliant-wordpress-hosting/how-to-test-responsive-design-device-mode-chrome-developer-tools/

Answer 2

Вы можете использовать Bootstrap для создания отзывчивой веб-страницы. Для пользователей React у них есть React bootstrap, без jQuery зависимость- https://react-bootstrap.github.io/. Пожалуйста, попробуйте это для полностью адаптивной веб-страницы. Для адаптивного макета сетки вы можете использовать Bootstrap Сетка системы - https://getbootstrap.com/docs/4.0/layout/grid/