Как сделать HTML-страницу адаптивной? - PullRequest
0 голосов
/ 02 декабря 2018

Я хочу, чтобы моя веб-страница выглядела примерно так: https://i.imgur.com/9rOPhRM.jpg независимо от того, какой браузер я использую (Opera, Chrome, Firefox и т. Д.), Но я не знаю, как это сделать.И более того, у меня есть вторая проблема (которую я считаю больше) при попытке изменить размер окна или увеличить страницу.Я записал это: https://www.youtube.com/watch?v=-Qcy-VIRAfY&feature=youtu.be

Это мой код: https://justpaste.it/6co8x (вещи, которые не имеют отношения, выделены жирным шрифтом).

Можете ли вы помочь мне, пожалуйста?

1 Ответ

0 голосов
/ 02 декабря 2018

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

https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228

после этого я бы посоветовал вам использовать некоторые медиазапросы в коде HTML или CSS / SASS, возможно, что-то вроде этого может помочь:

https://medium.com/@clergemarvin/create-a-responsive-site-using-css-media-queries-d56e39a892e6

PS: вы можете избавиться от медиа-запросов, используя элементы сетки CSS.надеюсь, это поможет;)

...