Aдаптивная верстка пример

с шаблоном адаптивной страницы

Лучший способ сверстать на флексах. Флексы на пару лет раньше вошли во всеобщую поддержку в отличие от гридов. Но флексы и гриды можно сочетать между собой.

Отличие состоит в том что флексы будут проще. Стандартная современная разметка страницы. (семантическими тегами html 5). html5 взаимодействовать в комплексной троицы: html,css,js. Как бы сказать: бутстрап не особо сочетается, то есть бутстрап может быть удобным, но взаимодействие тегов html5, css через яваскрипт. Круто работает без бутстрапа. Не удивительно что в реакте многие подключают бутстрап. Это может быть полезно для бекендеров, чтобы не отвлекаться на стили. Когда надо быстро сделать лендинг. Тогда как на фронте лучший вариант писать полностью адаптивную верстку на скользящих блоках. Динамически генерируемых яваскриптом.

Как делать адаптивную верстку

Тег вьюпорт Сочетать тег вьюпорт с резиновой основой max-width:100%; Адаптивность на флексах еще дополняется тегом flex-wrap: wrap; - это когда блоки перепрыгивают на новую строку, так же важно учесть что для родительского блока для красоты иногда нужно ставить min-height: 100vh; overflow:auto;

https://developer.mozilla.org/ru/docs/Web/CSS/overflow overflow предназначен для отображения блоков за пределами видимости - visible, Их сокрытия - hidden. http://htmlbook.ru/css/overflow-y приминение по y - это горизонтальная прокрутка, наиболее частое применение носит на добавление половинок изображений.

Пример каркаса сайта на флексах:

гитхаб: https://amir248.github.io/site-frame-example-on-flex-boxes/

Репозиторий: https://github.com/amir248/site-frame-example-on-flex-boxes

Изначально блоки на флексах расположены слева направо, чтобы все выровнять сверху вниз, надо написать flex-direction: column; - эта запись делать блоки столбцом, но и юстифай контент, и алигн итемс, меняются своими местами. Что на фантастическое удивление преследуется законами логики! О_о

Семантические теги.

Чем бутстрап может шокировать, так это не такое определение семантических тегов, какими они представляются без бутстрапа. Да и бутстрап предназначен больше для бекендщиков, чтобы не уделять внимание на размещение сетки. Вписывать изящное взаимодействие яваскриптом подстроенное под разные соотношения экрана. Может показаться темным лесом если смотреть со стороны бекенда. Семантические теги описаны подробно. https://html5css.ru/html/html5_semantic_elements.php Поисковики обращают внимание на содержание тегов, наиболее точно представляют их содержимое.

ChikChicly SpaceHands ForsmaZhorovich