| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| software:development:demo:responsive_site_layout [2023/09/06 11:09] – [10. Стили для нижнего колонтитула] vladpolskiy | software:development:demo:responsive_site_layout [2024/01/26 21:19] (текущий) – [Пример сайта] vladpolskiy |
|---|
| Адаптивная верстка сайта (от английского, responsive web design, иногда — adaptive web design) — это создание структуры HTML-документа на базе HTML-разметки, предусматривающей автоматическую адаптацию веб-страницы в зависимости от размера экрана устройства пользователя. Иными словами - это макет веб-страницы, автоматически подстраивающийся под размер экрана разнообразных гаджетов пользователя, таких как планшеты и смартфоны. | Адаптивная верстка сайта (от английского, responsive web design, иногда — adaptive web design) — это создание структуры HTML-документа на базе HTML-разметки, предусматривающей автоматическую адаптацию веб-страницы в зависимости от размера экрана устройства пользователя. Иными словами - это макет веб-страницы, автоматически подстраивающийся под размер экрана разнообразных гаджетов пользователя, таких как планшеты и смартфоны. |
| {{:software:development:demo:blender3d_demo_0.jpg?550 |}} В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон. | {{:software:development:demo:blender3d_demo_0.jpg?550 |}} В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон. |
| Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. | Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. Основные примеры создания приведены в статье [[software:development:web:docs:learn:css:css_layout:responsive_design|Отзывчивый дизайн]]. |
| |
| =====Шаблон страницы при верстки===== | =====Шаблон страницы при верстки===== |
| |
| =====Пример сайта===== | =====Пример сайта===== |
| Пример сайта выполненного в [[https://book51.ru/wiki/demo/code/blender3d_demo.html|адаптивной вёрстке]] можно посмотреть в разделе пример или перейдя по [[https://book51.ru/wiki/demo/code/blender3d_demo.html|ссылке]]. для понимания примера необходимо сузить просматриваемую страницу в браузере или просмотреть на компьютере и в браузере мобильного устройства. | Пример сайта выполненного в [[https://book51.ru/demo/code/blender3d_demo.html|адаптивной вёрстке]] можно посмотреть в разделе пример или перейдя по [[https://book51.ru/demo/code/blender3d_demo.html|ссылке]]. для понимания примера необходимо сузить просматриваемую страницу в браузере или просмотреть на компьютере и в браузере мобильного устройства. |
| |
| <html> | <html> |
| :# | :# |
| ====6. Общие CSS-стили==== | ====6. Общие CSS-стили==== |
| Общие стили, сброс стилей браузера по умолчанию: | Все нижеприведенные стили вынесены в один внешний файл CSS. |
| |
| <code css CSS> | <code css CSS> |
| | /*сброс стилей браузера по умолчанию. */ |
| *, *:after, *:before { | *, *:after, *:before { |
| box-sizing: border-box;/*ширины и высоты элемента(width и height = значения полей и границ, но не отступов (margin))*/ | box-sizing: border-box;/*ширины и высоты элемента(width и height = значения полей и границ, но не отступов (margin))*/ |
| </code> | </code> |
| |
| ====7. Стили для шапки и её содержимого==== | ====7. Стили содержимого блока header ==== |
| |
| <code css CSS> | <code css CSS> |
| </code> | </code> |
| |
| ====8. Стили для блока с основным содержимым==== | ====8. Стили содержимого блока main==== |
| |
| |
| </code> | </code> |
| |
| ====9. Стили для боковой колонки==== | ====9. Стили блока aside==== |
| |
| <code css CSS> | <code css CSS> |
| </code> | </code> |
| |
| ====10. Стили для нижнего колонтитула==== | ====10. Стили блока footer==== |
| Подвал сайта разделим на три равных столбца: | Подвал сайта разделим на три равных столбца: |
| |
| |
| <code css CSS> | <code css CSS> |
| @media (max-width: 768px) { | @media (max-width: 768px) {/* правило запроса для ширины viewport от 768px*/ |
| /* показываем кнопку для переключения верхней навигации */ | /* показываем кнопку для переключения верхней навигации */ |
| .nav-toggle { | .nav-toggle { |
| display: block; | display: block;/*элемент показывается как блочный*/ |
| } | } |
| header { | header { |
| padding: 10px 0; | padding: 10px 0;/* значение полей вокруг содержимого*/ |
| } | } |
| /* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */ | /* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */ |
| #menu { | #menu { |
| max-height: 0; | max-height: 0;/*высота блочного элемента*/ |
| background: white; | background: #2f4f4f;/*цвет фона кнопок мобильного меню #2f4f4f - аспидно-серый*/ |
| float: none; | float: none;/*выравнивание элемента отсутствует*/ |
| position: absolute; | position: absolute;/*указывает, что элемент абсолютно позиционирован*/ |
| overflow: hidden; | overflow: hidden;/*отображается только область внутри элемента, остальное скрыто*/ |
| top: 63px; | top: 63px;/*расстояние от верхнего края родительского элемента*/ |
| right: 0; | right: 0;/*расстояние от правого края родительского элемента*/ |
| left: 0; | left: 0;/*расстояние от левого края родительского элемента*/ |
| margin: 0; | margin: 0;/*значение отступа от каждого края элемента*/ |
| padding: 0; | padding: 0;/* значение полей вокруг содержимого*/ |
| z-index: 3; | z-index: 3;/*налажение элементов друг на друга в определенном порядке*/ |
| } | } |
| /* делаем элементы списка блочными, чтобы они располагались друг под другом */ | /* делаем элементы списка блочными, чтобы они располагались друг под другом */ |
| #menu li { | #menu li { |
| display: block; | display: block;/*элемент показывается как блочный*/ |
| text-align: center; | text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ |
| border-bottom: 1px solid black; | border-bottom: 1px solid black;/*толщина 1px стиль жирный и цвет границы черный внизу элемента*/ |
| margin-right: 0; | margin-right: 0;/*отступа от правого края элемента*/ |
| } | } |
| /* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/ | /* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/ |
| .posts-list, aside { | .posts-list, aside { |
| width: 100%; | width: 100%;/*ширина блока растянута на всю страницу*/ |
| float: none; | float: none;/*выравнивание элемента отсутствует*/ |
| } | } |
| .widget-post-title { | .widget-post-title { |
| font-size: 1.5em; | font-size: 1.5em;/* размер шрифта элемента */ |
| } | } |
| } | } |
| |
| @media (max-width: 480px) { | @media (max-width: 480px) {/* правило запроса для ширины viewport от 480px*/ |
| /* отменяем обтекание для логотипа и выравниваем по центру*/ | /* отменяем обтекание для логотипа и выравниваем по центру*/ |
| .logo { | .logo { |
| float: none; | float: none;/*выравнивание элемента отсутствует*/ |
| margin: 0 auto 15px; | margin: 0 auto 15px;/*значение отступа от каждого края элемента*/ |
| display: table; | display: table;/*представление -блочная таблица*/ |
| } | } |
| .logo span { | .logo span { |
| margin: 0 2px; | margin: 0 2px;/*значение отступа от каждого края элемента*/ |
| } | } |
| /* позиционируем меню на увеличившуюся высоту шапки */ | /* позиционируем меню на увеличившуюся высоту шапки */ |
| #menu { | #menu { |
| top: 118px; | top: 118px;/*расстояние от верхнего края родительского элемента*/ |
| } | } |
| /* позиционируем форму поиска по левому краю */ | /* позиционируем форму поиска по левому краю */ |
| #searchform { | #searchform { |
| float: left; | float: left;/*элемент выравнивается по левой стороне*/ |
| margin-left: 0; | margin-left: 0;/*отступ от левого края элемента*/ |
| } | } |
| /* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */ | /* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */ |
| .post-footer { | .post-footer { |
| border-top: none; | border-top: none;/* толщина, стиль и цвет границы сверху элемента отсутствует*/ |
| border-bottom: none; | border-bottom: none;/*толщина, стиль и цвет границы внизу элемента отсутствует*/ |
| text-align: center; | text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ |
| } | } |
| /* отменяем позиционирование кнопок соцсетей */ | /* отменяем позиционирование кнопок соцсетей */ |
| .post-social { | .post-social { |
| position: static; | position: static;/*элемент отображаются как обычно*/ |
| text-align: center; | text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ |
| transform: none; | transform: none;/*трансформации элемента нет*/ |
| margin-top: 20px; | margin-top: 20px;/*отступ блока от текста-контента*/ |
| } | } |
| .widget-post-title { | .widget-post-title { |
| font-size: 1.2em; | font-size: 1.2em;/* размер шрифта элемента */ |
| } | } |
| /* отменяем обтекание для столбцов подвала страницы */ | /* отменяем обтекание для столбцов подвала страницы */ |
| .footer-col { | .footer-col { |
| float: none; | float: none;/*выравнивание элемента отсутствует*/ |
| margin-bottom: 20px; | margin-bottom: 20px;/*отступ от нижнего края элемента*/ |
| width: 100%; | width: 100%;/*ширина блока растянута на всю страницу*/ |
| text-align: left; | text-align: left;/*горизонтальное выравнивание текста в пределах элемента*/ |
| } | } |
| } | } |
| $('#menu').toggleClass('active'); | $('#menu').toggleClass('active'); |
| });%%** <color #22b14c>- в теле **%%<header>%%** -> таблицы стиля CSS **%%.nav-toggle%%** -> блока скрытого меню **%%<div class="nav-toggle"><span></span></div>%%** имеет значение таблицы стиля CSS **%%display: none;%%** (т.е. скрыт по умолчанию и появляющейся при ширине странице меньше 768px) -> нажатие кнопки блока показа/скрытия главного меню -> стиль CSS **%%#menu%%** активный, т.е. будет показано скрытое меню -> (стиль CSS **%%#menu.active%%**).</color> | });%%** <color #22b14c>- в теле **%%<header>%%** -> таблицы стиля CSS **%%.nav-toggle%%** -> блока скрытого меню **%%<div class="nav-toggle"><span></span></div>%%** имеет значение таблицы стиля CSS **%%display: none;%%** (т.е. скрыт по умолчанию и появляющейся при ширине странице меньше 768px) -> нажатие кнопки блока показа/скрытия главного меню -> стиль CSS **%%#menu%%** активный, т.е. будет показано скрытое меню -> (стиль CSS **%%#menu.active%%**).</color> |
| |
| :# | :# |
| | ====14. Архив файлов примера==== |
| | Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\ |
| | <color #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</color>\\ |
| | {{ :software:development:demo:code.rar |rar arhiv 71,8mb}} |
| |
