Все, что вам нужно знать об адаптивных веб-макетах

внешний интерфейс CSS flexbox
Все, что вам нужно знать об адаптивных веб-макетах

Есть такая проблема.

Расскажите мне обо всех стилях веб-верстки, которые вы знаете?

В общем, есть такие способы раскладки:

  1. плаватьfloat:left|right
  2. inline-block display:inline-block
  3. flexible box display:flex
  4. grid display:grid
  5. Абсолютное и относительное позиционированиеposition:absolute|relative
  6. лист<table>илиdisplay:table
  7. Использовать макет кадраbootstrap,Pure.cssЖдать

Некоторые друзья скажут, что это слишком, как мне выбрать?

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

Во всех примерах в этой статье используется один и тот же макет с тремя столбцами.исходный код нажмите на меня

  • Ширина большого размера > 1024 пикселей
  • Средний размер 768 пикселей
  • Ширина маленького размера

1. Плавающий макетfloat:left|right

Один из наиболее часто используемых методов компоновки, наборfloatЭлемент находится вне потока документов. Следует отметить, что после использования поплавка вам необходимо очистить поплавок, чтобы не повлиять на следующие неплавающие элементы.

HTML

<div class="rwd-header">Header</div>
<div class="rwd-content">
  <div class="rwd-content-left">Left</div>
  <div class="rwd-content-body">
    <div class="rwd-content-bodyTop">Top Content</div>
    <div class="rwd-content-bodyBottom">Bottom Content</div>
  </div>
  <div class="rwd-content-right">Right</div>
</div>
<div class="rwd-footer">Footer</div>

Обычный HTML-макет, один верхний и нижний колонтитулы и макет из трех столбцов посередине.

ключ css

.rwd-content-left,
.rwd-content-body,
.rwd-content-right {
  float: left;
}

Установите float для всех трех столбцов посередине.

.rwd-content::after {
  content: "";
  clear: both;
  display: block;
}

очистить поплавок

.rwd-content-left {
  width: 20%;
  height: 200px;
}

.rwd-content-body {
  width: 60%;
}

.rwd-content-right {
  height: 300px;
  width: 20%;
}

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

@медиа-запрос

Когда условие запроса @media выполнено, примените{}стиль в .

Экран относится к экрану компьютера, а печать относится к распечатанной странице.MDN @media

То, что делает @media, может быть полностью заменено javascript, добавлением класса с помощью js или изменением свойств css непосредственно с помощью js. Преимущество в том, что браузер полностью совместим, а недостаток в том, что используется js.

@media only screen and (max-width: 1024px) {
  .rwd-content-left {
    width: 30%;
  }
  .rwd-content-body {
    width: 70%;
  }
  .rwd-content-right {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  [class*="rwd-content-"] {
    width: 100%;
  }
}

экран среднего размераrightсожмите, просто дайтеleftиcontentВ сумме это составляет 100%, и следующие вещи автоматически заворачиваются.

Небольшой размер использует селектор css, чтобы поместить всеrwd-content-Ширина класса в начале установлена ​​на 100%.

попробуй сам

2. inline-block display:inline-block

HTML

<div class="rwd-header">Header</div>
<div class="rwd-content"
  ><div class="rwd-content-left">Left</div
    ><div class="rwd-content-body"
    ><div class="rwd-content-bodyTop">Top Content</div
    ><div class="rwd-content-bodyBottom">Bottom Content</div
  ></div
  ><div class="rwd-content-right">Right</div>
</div>
<div class="rwd-footer">Footer</div>

html такой же, как и плавающий макет, чтобы избежатьколлапс белого пространстваВопрос, написание немного изменилось.

ключ css

.rwd-content-left,
.rwd-content-body,
.rwd-content-right {
  display: inline-block;
  vertical-align: top;
}

Для нашего макета просто поставьтеfloat:leftИзмените эти два предложения.

Адаптивный код такой же, как у float, и повторяться не будет.

попробуй сам

Float vs. Inline-block

Обе схемы очень распространены.

  • Если требуется вертикальное центрирование, используйте встроенный блок.

  • inline-block имеет проблемы со сжатием пробелов.

  • Используйте поплавок, будьте осторожны, чтобы очистить поплавок.

  • Особых рекомендаций по использованию нет, все зависит от личных привычек.

Как настроить порядок элементов в макете с плавающей запятой или встроенного блока?

Например, когда я в маленьком размере, я хочу положить содержимое сверху, а сжать слева и справа, как это сделать?

Не существует чистого метода CSS для макетов с плавающей запятой и встроенных блоков. Используйте js, чтобы вычитать dom и возвращать его обратно. И флексбоксы, и сеточные макеты могут хорошо решить эту проблему.

3. flexible box display:flex

HTML

<div class="rwd-header">Header</div>
<div class="rwd-content">
  <div class="rwd-content-left">Left</div>
  <div class="rwd-content-body">
    <div class="rwd-content-bodyTop">Top Content</div>
    <div class="rwd-content-bodyBottom">Bottom Content</div>
  </div>
  <div class="rwd-content-right">Right</div>
</div>
<div class="rwd-footer">Footer</div>

html все тот же.

Прежде чем перейти к CSS, давайте поговорим об основах гибкости.

* flexbox не полностью указывает на север в течение двух минут

Макет flexbox буквально на заказ. Сначала подумайте, что вы хотите съесть, затем закажите обязательные блюда и, наконец, закажите дополнительные блюда, нравится вам это или нет.

Что вы хотите съесть в первую очередь, или используйте предыдущий пример. Независимо от верхнего и нижнего колонтитула вам нужно оформить что-то вроде этого:

Затем закажите необходимые блюда, есть следующие обязательные пункты:

1).flex-direction, выберите горизонтальное направление слева направо, выберитеflex-direction: row 

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

2).flex-wrap, у нас однострочная верстка, не переносим, ​​выбираемflex-wrap: nowrap

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3).justify-content, если есть место по горизонтали, как его выделить, выбираемspace-between

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

4).Как расположить по вертикали, выбираемalign-items: flex-start

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

5).align-content, как выделить место для многострочной верстки, у нас однострочная верстка, которой нет

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Выбрав эти 5, добавьтеdisplay: flex;, напишите во гибкий контейнер, и все готово.

Где можно полениться: Для вышеперечисленных 5 атрибутов первое значение является значением по умолчанию.Если выбран первый, этот атрибут не нужно записывать.

Последнее необязательное меню чаще используется для настройки порядка flex-элементов (flex-элементов), изменения макета подэлемента по отдельности и так далее.

Подробный урок нажмите здесь:Учебник по флексбоксу на китайском языке[1] A Guide to Flexbox[2]

ключ css

.rwd-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

Свойство гибкого контейнера (контейнера) указано выше.

@media only screen and (max-width: 1024px) {
  .rwd-content {
    flex-wrap: wrap;
  }
  .rwd-content-left {
    width: 30%;
  }
  .rwd-content-body {
    width: 70%;
  }
  .rwd-content-right {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  [class*="rwd-content-"] {
    width: 100%;
  }
}

В адаптивной верстке установитеflex-wrap: wrap;, остальные такие же.

попробуй сам

Flexbox vs. Float/Inline-block

  • Если с браузером все в порядке, flexbox может заменить (или заменить большинство) float и inline-block.
  • По сравнению с float, flexbox решает проблему вертикального центрирования.
  • По сравнению с float/inline-block, flexbox имеет больше методов вертикальной компоновки, которые могут сделать содержимое в контейнере одинаковой высоты, а также могут изменить порядок содержимого.
  • Flexbox, как и название, очень гибкий, один и тот же макет можно реализовать разными способами.
  • Недостаток flexbox в том, что есть много свойств, которые нужно помнить, и небольшое количество браузеров плохо его поддерживает.

Can I use flex ?

4. Макет сеткиdisplay:grid

HTML

<div class="rwd-grid">
  <div class="rwd-header">Header</div>
  <div class="rwd-content-left">Left</div>
  <div class="rwd-content-bodyTop">Top Content</div>
  <div class="rwd-content-bodyBottom">Bottom Content</div>
  <div class="rwd-content-right">Right</div>
  <div class="rwd-footer">Footer</div>
</div>

Особенность грида в том, что вы можете делать все, что хотите, порядок dom не имеет значения, главное, чтобы он располагался под контейнером грида.

Прежде чем перейти к css, давайте поговорим об основах сетки.

* сетка две минуты + две минуты не полностью указывает на север

2 две минуты, потому что в целом есть два способа использования сетки:

1) Назовите элемент сетки и определите макет сетки в контейнере сетки.иУкажите расположение всех элементов сетки по имени.

2). Контейнер сетки определяет только макет. Когда каждый элемент сетки используется, он может выбрать, в какую (или какую) сетку его поместить.

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

Черные линии с 1 по 7 по горизонтали и красные линии с 1) по 4) по вертикали называются линиями сетки.

Одна или несколько прямоугольных областей, окруженных линиями сетки, называются блоками сетки.

Первый макет сетки:

.rwd-grid {
  display: grid;
  grid-gap: 5px;
  width: 100%;
  grid-template-areas: "header header header"
                        "left   top    right"
                        "left   bottom right"
                        ".      bottom right"
                        ".      bottom ."
                        "footer footer footer";
  grid-template-rows: 80px 150px 50px 100px 100px 100px;
  grid-template-columns: 20% 60% 20%;
}

.rwd-header {
  grid-area: header;
}
.rwd-content-left {
  grid-area: left;
}
.rwd-content-bodyTop {
  grid-area: top;
}
.rwd-content-bodyBottom {
  grid-area: bottom;
}
.rwd-content-right {
  grid-area: right;
}
.rwd-footer {
  grid-area: footer;
}

Для элементов сеткиgrid-areaприсвоить имя.

В контейнере сетки можно установить три основных свойства:

grid-template-areas: Это карта, такая же, как макет карты, которую мы разделили линиями,.Указывает пустое.

grid-template-rows: Установите высоту линии или авто, если она не установлена. Помимо фиксированных чисел проценты имеют еще и фр.grid-template-rows: repeat(3, 1fr)Это означает третьи.

grid-template-columns: установка ширины столбца.

Адаптивная компоновка — это перерисовка карты.

@media only screen and (max-width: 1024px) {
  .rwd-grid {
    grid-template-areas: "header header"
                          "left   top"
                          "left   bottom"
                          ".      bottom"
                          "right  right"
                          "footer footer";
    grid-template-rows: 80px 150px 50px 200px 100px 100px;
    grid-template-columns: 30% 70%;
  }
}

@media only screen and (max-width: 768px) {
  .rwd-grid {
    grid-template-areas: "header"
                          "left"
                          "top"
                          "bottom"
                          "right"
                          "footer";
    grid-template-rows: 80px 200px 150px 250px 100px 100px;
    grid-template-columns: 100%;
  }
}

Попробуйте сами 1

Второй макет сетки:

.rwd-grid {
  display: grid;
  grid-gap: 5px;
  margin: 5px 0;
  width: 100%;
  grid-template-rows: 80px 150px 50px repeat(3, 100px);
  grid-template-columns: 20% 60% 20%;
}

Просто установите контейнер сеткиgrid-template-rowsиgrid-template-columns. Когда элемент сетки используется, установите место, где он должен быть размещен. Есть много способов настроить его.

.rwd-header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

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

Ссылаясь на рисунок, его следует хорошо понимать.

Эквивалентно:

.rwd-header {
  grid-column: 1 ／ 4;
  grid-row: 1 ／ 2;
}

Сокращение для двух свойств, / .

Эквивалентно:

.rwd-header {
  grid-column: 1 ／ span 3;
  grid-row: 1;
}

span 3 означает, что пройдено 3 сетки; если элемент сетки охватывает только 1 сетку, линию сетки, задающую конечную позицию, можно опустить.

Эквивалентно:

.rwd-header {
  grid-area: 1 / 1 / 2 / 4;
}

Порядок левый-нижний-правый на линии сетки отличается от верхнего-правого-нижнего-левого для полей и отступов.

Конечно, вы можете не обращать внимания на весь бардак, посмотрите мою адаптивную верстку:

@media only screen and (max-width: 1024px) {
  .rwd-grid {
    grid-template-rows: 80px 150px 50px 200px 100px 100px;
    grid-template-columns: 30% 70%;
  }

  .rwd-header {
    grid-area: 1 / 1 / 2 / 3;
  }
  .rwd-content-left {
    grid-area: 2 / 1 / 4 / 2;
  }
  .rwd-content-bodyTop {
    grid-area: 2 / 2 / 3 / 3;
  }
  .rwd-content-bodyBottom {
    grid-area: 3 / 2 / 5 / 3;
  }
  .rwd-content-right {
    grid-area: 5 / 1 / 6 / 3;
  }
  .rwd-footer {
    grid-area: 6 / 1 / 7 / 3;
  }
}

Попробуйте сами 2

Подробный урок нажмите здесь:Позиционирование на основе линий в сетках[3] и тут область шаблона сетки[4]

Grid vs. Flexbox

  • Flexbox однонаправленный, горизонтальный или вертикальный, а сетка двумерная.
  • Grid заключается в том, что вы можете делать все, что хотите, даже если это не имеет никакого отношения к порядку html, просто кидаете его в контейнер grid.
  • Grid может делать то, чего не может flexbox, и наоборот. Лучше всего использовать оба варианта, если они поддерживаются браузером.
  • Grid подходит для верстки больших скелетов, а flexbox — для локальной верстки.
  • Самый большой недостаток сетки заключается в том, что поддержка браузера не очень хороша.
  • Еще одним недостатком сетки является то, что если вы хотите что-то добавить или удалить в существующем макете, это в основном перерисовка, что на самом деле не является недостатком, потому что перерисовка происходит очень быстро.
  • сетка не подходит для сложной верстки, потому что слишком много линий сетки, у меня кружится голова.
  • Советы по сетке, используйте инструменты отладки Chrome и Firefox, чтобы просмотреть контейнер сетки, чтобы увидеть сетку, просто взглянув на код, вы сойдете с ума.

Can I use grid ?

5. Абсолютное и относительное позиционированиеposition:absolute|relative

Довольно часто используется, особенно в различных спецэффектах.

Для адаптивных макетов посчитайтеtopиleftБар.

6. Формы<table>илиdisplay:table

Лично я считаю, что раскладка таблиц больше подходит для таблиц (выглядит как бред, но это не так).

Если это общий макет страницы, не используйте таблицу.Why not use tables for layout in HTML?[5]

Адаптацию таблицы смотрите здесь:Responsive table layout[6]

7. Используйте макеты фреймовbootstrap,Pure.cssЖдать

Так называемое изменение неотделимо, и макет фреймворка также использует принципы, упомянутые выше, поэтому я не буду здесь подробно останавливаться на различных фреймворках.

* Модель коробки IE

Рекомендуется для всех элементов плюсborder-box;.

* {
  box-sizing: border-box;
}

Ширина и высота блочной модели IE включают отступы и границы, так что расположение процентов лучше контролируется, и не будет переноса строки, когда сумма превышает 100%.

* Старайтесь не использовать фиксированную высоту и ширину

Используйте меньшую или не фиксированную высоту и ширину в адаптивных макетах, используйте проценты, авто или calc().

* viewport

<meta name="viewport" content="width=500, initial-scale=1">

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

Подробное объяснение здесь:viewport meta[7]

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

Встречая крутую адаптивную страницу, хоть не говорите: как это достигается? И такая операция?

Наконец, чтобы подвести итог:

На что следует обратить внимание при использовании адаптивных макетов:

  1. Используйте блочную модель IE box-sizing: border-box
  2. Не используйте фиксированную ширину и высоту, используйте проценты, авто или calc()
  3. @media — инструмент адаптивной верстки
  4. Чтобы установить мета вьюпорт на мобильном телефоне
  5. Относительно выбора различных раскладок: В случае поддержки браузером макет сетки рекомендуется для большого фрейма страницы. После установки полки рекомендуется использовать flex для частичной верстки. Браузерная поддержка плавающих и встроенных блоков хороша, но у каждого есть свои недостатки.

Затем некоторые студенты должны спросить, это все, что вам нужно, чтобы изучить Flex и Grid? Извините, что узнал все (это так страшно). Различные макеты имеют свои сценарии использования. И вы не можете запретить другим использовать его, вы все должны это понимать, верно? Можно только сказать, что нужно идти в ногу со временем, дорога длинна и дорога длинна, и я буду искать ее вдоль и поперек.

использованная литература

[1] Учебное пособие по Flex Layout — http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2] A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[3] Позиционирование на основе строк в CSS Grid — https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid

[4] Область шаблонов сетки — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

[5] Why not use tables for layout in HTML? - https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html

[6] Responsive table layout - http://allthingssmitty.com/2016/10/03/responsive-table-layout/

[7] Using the viewport meta tag to control layout on mobile browsers - https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

[8] Responsive Web Design - https://www.w3schools.com/css/css_rwd_intro.asp

[9] Can I use - https://caniuse.com/

Категории