Как создать адаптивный веб-сайт с помощью CSS Grid и Flexbox

Как создать адаптивный веб-сайт с помощью CSS Grid и Flexbox

Сайт на iPhone

В этом примере реализуется адаптивный дизайн веб-сайта с помощью CSS, HTML, и JavaScript. Макет имеет два варианта, подходящих как для настольных браузеров, так и для мобильных устройств..

Базовая настройка

Начните с index.css и index.html из Сеточный макет святого грааля CSS.

Поместите index.css и index.html в одну папку. Откройте index.html в веб-браузере..

Святой Грааль

Дизайн макета

В нашем примере показан один из способов создания домашней страницы для вымышленной компании / услуги. Домашняя страница — это первое, что видит пользователь при посещении сайта..

Контент содержания

Основная информация, отображаемая на главной странице, указана ниже..

  • Имя / логотип — Идентификационные данные компании / услуги, расположенные в заголовке, выровнены по левому краю.
  • Анонсы — Первый раздел основного корпуса. Пользователь видит эту информацию выше сгиба, перед просмотром предметов на продажу. Это пространство может содержать важные обновления, ограниченные по времени предложения или рекомендуемые товары..
  • вещи на продажу — Название, описание, цена и текущий инвентарь различных предметов для продажи..
  • Предстоящие События — Информация о будущих деловых мероприятиях, в которых пользователь может захотеть принять участие..
  • Сообщение дня — Вращающийся "вкус" контент, такой как викторина или вдохновляющая цитата.
  • Нижний колонтитул — Информация об авторстве и / или авторских правах.

Схема субконтента

Следующие ссылки и дополнительная информация доступны на главной странице, побуждая пользователя к изучению. Этот субсодержание может по-разному отображаться в макете в зависимости от устройства просмотра пользователя.

  • В настольном браузере или мобильном устройстве в ландшафтном режиме отображается весь субконтент..
  • На мобильном устройстве в портретном режиме или узком окне браузера на рабочем столе боковые панели исчезают. Субконтент перемещен или доступен в меню.

Следующий субконтент доступен на домашней странице.

  • О — Ссылка на отдельную страницу с заявлением об удостоверении личности. В режиме рабочего стола / альбомной ориентации он отображается в заголовке с выравниванием по правому краю. В портретном режиме это пункт меню.
  • Контакт — Ссылка на отдельную страницу с контактной информацией компании / услуги, такой как почтовый адрес, адрес электронной почты, номер телефона и т. Д. В режиме рабочего стола / альбомной ориентации эта ссылка отображается в заголовке по ширине справа. В портретном режиме это пункт меню.
  • Разделы — Ссылки на другие разделы сайта. В портретном режиме каждая ссылка на раздел представляет собой пункт меню..
  • Партнеры — Ссылки на партнерские предприятия / услуги. В режиме рабочего стола / альбомной ориентации партнеры отображаются на правой панели. В портретном режиме они отображаются внизу основного корпуса..

Схема расположения

Этот дизайн имеет два варианта компоновки..

  • Единый макет для устройств в альбомном режиме.
  • Единый макет для устройств в портретном режиме.

Настольные браузеры совместимы с обоими, но в основном просматривают альбомную ориентацию..

Макеты схематически изображены следующим образом.

Схема ландшафта

Портретная диаграмма

HTML-элементы

В этом дизайне каждому из следующих HTML-элементов назначается определенная цель макета..

Элемент
Цель
<div> Элемент div или div является фундаментальным строительным блоком макета. Вся страница содержится в div, включая элементы сетки компонентов (заголовок, панели, основное тело, нижний колонтитул). Div может содержать другой div.
<раздел> Содержит уникальный раздел информации, например "Анонсы," "вещи на продажу," и т. д. В этом макете основная часть реализована как секция секций.
<h1> Самый большой текст заголовка, используемый для названия веб-сайта.
<h2> Большой текст заголовка, используемый для элементов навигации (О нас, Контакты).
<h3> Средний текст заголовка, используемый для заголовков разделов (Наши друзья, Объявления).
<h4> Маленький текст заголовка, используемый для заголовков контента (Открыт для бизнеса, Cider fest).
<п> Абзац текста, который должен перейти на следующую строку.
<охватывать> Диапазон текста с альтернативным стилем, который не разрывает абзац.
<стол> Табличная информация, упорядоченная по строкам и столбцам, например, товары для продажи..

Flexbox

CSS Flexible Boxes (сокращенно Flexbox) — это набор специальных атрибутов CSS. Он создает элементы, которые расширяются или сжимаются ("сгибать") автоматически, в зависимости от их содержимого и контекста макета.

Элемент с атрибутом дисплей: flexbox это контейнер flexbox. Если форма контейнера изменяется (например, если пользователь изменяет размер окна браузера или поворачивает свое мобильное устройство), его дочерние элементы изменяют свое относительное положение и / или форму. Элементы изгибаются в одном измерении: горизонтально (в ряд) или вертикально (в столбце)..

Макет святого Грааля имеет пять основных гибких областей.

  • Верхний и нижний колонтитулы изгибаются по горизонтали (flex-direction: ряд), слева направо.
  • Левая панель, основной корпус и правая панель изгибаются по вертикали (flex-direction: столбец), сверху вниз.

Горизонтальная гибкость

В портретном режиме панели скрыты. Меню реализовано в виде гибкой колонки..

Портретная гибкость

Реализация: CSS, JavaScript и HTML.

CSS: index.css

/ * стили элементов * / * {margin: 0; / * по умолчанию все элементы (селектор *) не имеют поля * /} html {width: 100%; / * 100% ширина родительского (корневого) элемента * / height: 100vh; / * 100% высота области просмотра * / background: rgb (0, 0, 0, 0.1); / * 10% черный * / font-size: 1.0em; / * размер нашего корневого шрифта * / font-family: Arial, Helvetica, sans-serif; / * шрифт по умолчанию * /} body {min-height: 100%; } section {padding: 0.5rem; flex-grow: 1; / * во флекс-боксе разделы расширяются по оси флекс * /} h1 {/ * Название веб-сайта в заголовке * / font-size: 2.0rem; шрифт: нормальный; } h2 {/ * О программе, Контакты * / font-size: 1.25rem; } h3 {/ * Заголовки разделов * / font-size: 1.2rem; набивка: 0,5 бэр; } h4 {/ * Название элемента раздела * / font-weight: normal; набивка: 0,5 бэр; } p {/ * Стиль абзаца * / padding: 0.5rem; } a: link, a: посещенные {/ * якорные ссылки и посещенные якорные ссылки * / color: black; текстовое оформление: нет; / * отключение подчеркивания * /} a: hover {/ * при наведении курсора на привязку * / color: rgb (25, 25, 25); } a: active {/ * при щелчке по ссылке привязки * / color: rgb (96, 96, 96); } / * стили компонентов * / #container {display: grid; высота: 100%; столбцы-шаблон-сетки: [слева] 10rem auto 10rem [справа]; сетка-шаблон-строки: [вверху] 5rem auto 5rem [внизу]; сетка-шаблон-области: "голова голова голова" "левый основной корпус правый" "нога нога нога"; } #header {grid-area: head; / * соответствует grid-template-area * / background: rgb (0, 0, 0, 0.2); / * 20% черный * / display: flex; flex-direction: ряд; justify-content: пробел между; align-items: baseline; / * имя сайта и текст навигационного элемента выравниваются по базовой линии * / padding: 1.0rem; } #panel {/ * if element id ="панель" * / display: flex; / * этот элемент является родительским элементом flexbox * / flex-direction: column; / * его дочерние элементы изгибаются вертикально * / padding: 0.5rem; фон: rgb (0, 0, 0, 0.1); / * 10% черный * /} # panel.left {/ * if element id ="панель" и class ="оставили" * / grid-area: panleft; / * этот элемент заполняет область сетки * /} # panel.right {/ * if element id ="панель" и class ="верно" * / grid-area: panright; / * этот элемент заполняет область сетки * /} #footer {/ * if element id ="нижний колонтитул" * / grid-area: foot; / * этот элемент заполняет область сетки * / display: flex; / * этот элемент является родительским элементом flexbox * / flex-direction: column; / * его дочерние элементы изгибаются по вертикали * / justify-content: center; / * содержимое нижнего колонтитула по центру * / align-items: center; / * содержимое нижнего колонтитула по вертикали * / padding: 0.5rem; фон: rgb (0, 0, 0, 0.2); } #mainbody {/ * если идентификатор элемента ="основная часть" * / display: flex; / * этот элемент является родительским элементом flexbox * / flex-direction: column; / * его дочерние элементы изгибаются вертикально * / grid-area: mainbody; оправдать себя: центр; / * основное тело фиксированной ширины всегда центрируется * / width: 100%; минимальная ширина: 22,5 бэр; / * ширина основной части не может идти < 22.5rem * /} div # panel, div # mainbody {/ * дополнительное пространство под заголовком * / padding-top: 0.5rem; } #partners, #sections {/ * if element id ="партнеры" или id ="разделы" * / display: flex; / * этот элемент является родительским элементом flexbox * / flex-direction: row; / * его дочерние элементы сгибаются по горизонтали * / flex-wrap: wrap; / * его дочерние элементы могут переноситься на следующую строку * / align-content: flex-start; / * дочерние элементы начинаются в верхнем левом углу * /} # partners.wide {/ * if element id ="партнеры" и class ="широкий" * / display: none; / * по умолчанию не отображать этот элемент * /} #menu {position: absolute; / * позиция меню не зависит от других элементов * / right: 0; / * ноль пикселей от правой границы * / background: rgb (239, 239, 239); граница: 0,15 бэр, сплошной RGB (0, 0, 0, 0,4); видимость: скрыта; / * свойство видимости поддерживает переходы * / opacity: 0; / * непрозрачность + переход видимости = эффект исчезновения меню * / z-index: 1; / * убедитесь, что меню отображается поверх всего остального содержимого * /} #menuitems {/ * меню реализовано как контейнер flexbox * / display: flex; flex-direction: столбец; набивка: 1 бэр; } #menuitems h3 {border-top: 0.15rem твердый rgb (0, 0, 0, 0.1); / * светлая горизонтальная линейка * /} #menuitems .menusec {border-color: rgb (0, 0, 0, 0.25); / * более темная горизонтальная линия * /} #menuitems h3: hover {background-color: rgb (0, 0, 0, 0.1); / * серый цвет элементов меню при наведении курсора * /} .menubutton {text-align: right; курсор: указатель; / * указывает, что по нему можно щелкнуть как по ссылке * / user-select: none; / * пользователь не может выбрать кнопку как текст * /} #menuitems .alignright {text-align: right; / * текст пункта меню с выравниванием по правому краю (не используется) * /} #header h1.menubutton {display: none; / * в виде по умолчанию (альбомный), скрыть кнопку меню * / border: 0.15rem solid rgb (0, 0, 0, 0); / * (невидимая) прокладка выравнивания * /} #header .placeholder {/ * эта невидимая кнопка отображается, когда меню * / color: rgb (0, 0, 0, 0); / * кнопка скрыта, поэтому высота заголовка совпадает. * / user-select: нет; / * пользователь не может выделить текст невидимой кнопки * /} .sectionlink, .partnerlink {border-radius: 0.25rem; / * придаем этому элементу слегка закругленный край * / font-weight: normal; размер шрифта: 1.1rem; набивка: 0,5 бэр; ширина: 7бэр; / * фиксированная ширина для этих элементов * / margin-bottom: 1rem; / * небольшой запас для удобочитаемости * / background: rgb (0, 0, 0, 0.1); } .sectionlink: hover, .partnerlink: hover {background-color: rgb (0, 0, 0, 0,065); / * яркость изображения при наведении курсора мыши * /} .partnerlink {height: 7rem; / * элементы-партнеры имеют дополнительно фиксированную высоту * /} .partnerlink.wide {margin: 0.5rem 1rem 0.5rem 0; / * поля для интервала, если они оборачиваются * /} .clickable-area {/ * использовать всякий раз, когда интерактивная область исключает поля * / height: 100%; / * интерактивная область охватывает высоту родительского элемента * /} .eventitem, .announceitem, .motditem {margin-bottom: 0.5rem; / * небольшой запас для удобочитаемости * /} .title {/ * например., "Открыт для бизнеса" * / font-style: курсив; шрифт: нормальный; размер шрифта: 1.1rem; } .date {/ * например, 1 января 2021 г. * / font-style: italic; размер шрифта: 0,9 бэр; заполнение: 0 0 0 0,5 бэр; цвет: rgb (0, 0, 0, 0,5); } .navitem {/ * О нас, Контакты * / font-weight: normal; набивка: 0 0,5 бэр 0 1 бэр; } .headspace, .panspace, .footspace, .bodyspace {flex-grow: 1; / * эти элементы расширяются по оси гибкости, чтобы заполнить пространство * /} / * стили таблицы ("вещи на продажу") * / table {граница-коллапс: коллапс; / * ячейки таблицы, смежные с пикселями * / width: 100%; нижнее поле: 1 бэр; } й {выравнивание текста: слева; } tr {маржа: 4rem 0 0 0; нижняя граница: 0,15 бэр, сплошной RGB (0, 0, 0, 0,2); / * горизонтальная линейка * /} td, th {padding: 0.5rem; вертикальное выравнивание: сверху; } td.price {белое пространство: nowrap; / * пробел в цене не переносит строку * /} td.qty, th.qty {text-align: center; } span.perunit {непрозрачность: 0,5; } / * адаптивные стили, применяемые в портретном режиме * / @media screen и (max-width: 45rem) {/ *, если ширина области просмотра < 45rem * / # panel.left {конец столбца сетки: слева; / * область сетки панели уменьшается до нуля * /} # panel.right {grid-column-start: right; / * область сетки панели уменьшается до нуля * /} # partners.tall {display: none; / * скрыть партнеров в панели (перезаписывает display: flex) * /} # partners.wide {display: flex; / * показать партнеров в теле (перезаписывает display: none) * /} #panel, / * они исчезают из макета * / #header .placeholder, .navitem {display: none; } #mainbody {начало столбца сетки: слева; / * mainbody теперь начинается с левого края * / grid-column-end: right; / * mainbody теперь заканчивается на правом краю * /} #header h1.menubutton {/ * отображать кнопку меню заголовка * / display: inline; / * заменяет отображение: нет * /}}

JavaScript: index.js

Этот JavaScript реализует переключатель отображения / скрытия меню, который срабатывает при нажатии кнопки меню..

функция menuToggle (состояние) {var ele = document.getElementById (‘меню’); переключатель (состояние) {case ‘show’: ele.style.opacity = 1; ele.style.color = ‘rgb (96, 96, 96)’; ele.style.visibility = ‘видимый’; ele.style.transition = ‘видимость 0 с, непрозрачность 0,3 с’; перемена; case ‘hide’: ele.style.opacity = 0; ele.style.color = ‘черный’; ele.style.visibility = ‘скрытый’; ele.style.transition = ‘видимость 0,3 с, непрозрачность 0,3 с’; перемена; }}

HTML: index.html

<!DOCTYPE html> <html lang ="en"> <голова> <мета-имя ="область просмотра" содержание ="width = ширина устройства, начальный масштаб = 1"> <мета-кодировка ="utf-8"> <заглавие>Заголовок</заглавие> <ссылка rel ="таблица стилей" href ="index.css"> <скрипт src ="index.js"></ скрипт> </голова> <тело> <div id ="меню"> <раздел id ="Пункты меню"> <div class ="кнопка меню"> <h1 onclick ="menuToggle (‘скрыть’)" class ="кнопка меню">☰</ ч1> </ div> <п><!— пробел над первым пунктом меню —></п> <a href ="javascript: void (0);"><h3 class ="Menusec">Советы для хорошей жизни</ ч3></ а> <a href ="javascript: void (0);"><h3>Рецепты</ ч3></ а> <a href ="javascript: void (0);"><h3>Консультации по усадьбе</ ч3></ а> <a href ="javascript: void (0);"><h3 class ="Menusec">О нас</ ч3></ а> <a href ="javascript: void (0);"><h3 class ="Menusec">Связаться с нами</ ч3></ а> </раздел> </ div> <div id ="контейнер"> <div id ="заголовок"> <a href ="javascript: void (0);"><h1 class ="логотип">Наш фермерский стенд</ ч1></ а> <div class ="свободное пространство"></ div> <h1 onclick ="menuToggle (‘показать’)" class ="кнопка меню">☰</ ч1> <h1 class ="заполнитель">☰</ ч1> <h2 class ="navitem"> <a href ="javascript: void (0);"> <div class ="интерактивная область">О нас</ div> </ а> </ ч2> <h2 class ="navitem"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Связаться с нами</ div> </ а> </ ч2> </ div> <div id ="панель" class ="оставили"> <раздел id ="разделы"> <div class ="ссылка на раздел"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Советы для хорошей жизни</ div> </ а> </ div> <div class ="ссылка на раздел"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Рецепты</ div> </ а> </ div> <div class ="ссылка на раздел"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Консультации по усадьбе</ div> </ а> </ div> </раздел> </ div> <div id ="основная часть"> <раздел class ="mainbodyitems"> <h3>Анонсы</ ч3> <раздел class ="объявления"> <div class ="объявить"> <h4 класс ="заглавие">Открыт для бизнеса</ ч4> <p класс ="Дата">15 января</п> <п>Ремонт нашего нового магазина завершен, и мы открыты для бизнеса.</п> </ div> </раздел> <h3>вещи на продажу</ ч3> <раздел class ="forsaleitems"> <стол> <tr> <th>Элемент</ th> <th>Описание</ th> <th>Цена</ th> <й класс ="кол-во">Кол-во</ th> </ tr> <tr> <тд>Молоко</ тд> <тд>Хороший источник кальция.</ тд> <td class ="цена">2 доллара <span class ="на единицу">/ пол галлона.</охватывать></ тд> <td class ="кол-во">3</ тд> </ tr> <tr> <тд>Яйца</ тд> <тд>Отлично подходит для завтрака и выпечки.</ тд> <td class ="цена">4 доллара США <span class ="на единицу">/ доза.</охватывать></ тд> <td class ="кол-во">6</ тд> </ tr> <tr> <тд>Целый цыпленок</ тд> <тд>Идеально подходит для запекания.</ тд> <td class ="цена">5 долларов США <span class ="на единицу">/ фунт.</охватывать></ тд> <td class ="кол-во">4</ тд> </ tr> </стол> </раздел> <h3>Предстоящие События</ ч3> <раздел> <div class ="событие"> <h4 класс ="заглавие">Сидр Фест</ ч4> <p класс ="Дата">20 октября, 14.00–18:00</п> <п>Отметьте сезон свежим сидром из наших садов..</п> </ div> <div class ="событие"> <h4 класс ="заглавие">Хлебопекарный цех</ ч4> <p класс ="Дата">13 декабря, 9:00–полдень</п> <п>Узнайте, как создавать и выращивать закваску на закваске.</п> </ div> </раздел> <h3>Сообщение дня</ ч3> <раздел> <div class ="motditem"> <п>Ешьте лучше. Поддержите местную ферму.</п> </ div> </раздел> <h3 id ="партнеры" class ="широкий">Наши друзья</ ч3> <раздел id ="партнеры" class ="широкий"> <div class ="партнерская ссылка в целом"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Зеленая долина</ div> </ а> </ div> <div class ="партнерская ссылка в целом"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Ферма Индейки Хилл</ div> </ а> </ div> <div class ="партнерская ссылка в целом"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Кленовый сироп Берта</ div> </ а> </ div> <div class ="партнерская ссылка в целом"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Только органические семена</ div> </ а> </ div> </раздел> <div class ="пространство тела"></ div> </раздел> </ div> <div id ="панель" class ="верно"> <h3>Наши друзья</ ч3> <раздел id ="партнеры" class ="высокий"> <div class ="партнерская ссылка"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Зеленая долина</ div> </ а> </ div> <div class ="партнерская ссылка"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Ферма Индейки Хилл</ div> </ а> </ div> <div class ="партнерская ссылка"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Кленовый сироп Берта</ div> </ а> </ div> <div class ="партнерская ссылка"> <a href ="javascript: void (0);"> <div class ="интерактивная область">Только органические семена</ div> </ а> </ div> </раздел> </ div> <div id ="нижний колонтитул"> <п>Авторские права © 2021 Алиса &amp; Ферма Боба</п> </ div> </ div> </тело> </ html>

Внешность

В альбомной ориентации панели отображаются.

Пейзаж / вид на рабочий стол

Панорамный вид

Портретный вид

В портретном режиме панели скрыты, а меню активно. Партнеры отображаются как последняя часть основного текста..

Портретный вид