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

HTML CSS Отзывчивый дизайн

Введение в адаптивный макет

Что такое отзывчивость? Одна и та же страница имеет разные макеты на разных размерах экрана.

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

Как показано ниже:

Варианты адаптивного макета

Альтернативный вариант адаптивного дизайна:

  • Медиа-запрос CSS3 (рекомендовать): медиа-запрос, совместимый с IE9+, но совместимый с IE6-8 через плагины.
  • Flex: гибкая компоновка, плохая совместимость (IE10+)
  • Сетка: макет сетки, меньшая совместимость
  • Столбцы: сеточные системы, часто приходится полагаться на библиотеку пользовательского интерфейса, например, на загрузочную загрузку.

Отзывчивая разработка — это худшее, не используйте rem в гибриде

Введение в медиазапросы CSS3

Использование CSS3 Media Query для легкого переключения между различными макетами страниц с разной шириной экрана.

Совместимость: IE9+

В настоящее время CSS3 Media Query является относительно зрелым для IE-совместимых библиотек.respond.jsа такжеcss3-mediaqueries-js, каждый из которых имеет преимущества и недостатки

  • ответить.js(рекомендовать): 1k после сжатия реализован только наиболее часто используемый медиа-запросmin-width max-widthсовместимый;
  • css3-mediaqueries-js: в основном реализует совместимость всех возможностей медиазапросов в спецификации CSS3, поэтому сжатие составляет 16k, а производительность тестовой обратной связи намного ниже, чем у response.js;
<!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Использование медиазапроса CSS3

Метод введения делится на встроенный стиль и внешний стиль, рекомендуется использовать встроенный стиль.

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

// 屏幕尺寸大于 480px 时应用该规则
@media screen and (min-width: 480px) {
  .header {
    background: red;
  }
}

// 屏幕尺寸小于 800px 时应用该规则
@media screen and (max-width: 800px) {}

Логические операторы:

and or not only

Выбор точки останова (ширина страницы)

Индивидуальная (чао) система сетки (xi)

В основном плагиат Bootstrap и Layui

Зачем строить колеса? Система сеток часто зависит от фреймворка пользовательского интерфейса, но часто нам не нужны эти многочисленные компоненты и стили, достаточно только одной сетки В связи с этим требованием я (чао) сделал (xi) набор системных сеток

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

Почему 12 столбцов: поскольку число 12 имеет много общих делителей и является наименьшим общим кратным 1, 2, 3, 4 и 6, оно является относительно гибким.

1. Правила построения сетки:

  1. использовать.container(фиксированная ширина в устройствах выше маленьких экранов) и.container-fluid(Жидкий контейнер, ширина не будет фиксированной, но подойдет на 100%) в качестве контейнера макета.

  2. использоватьrowдля определения таких строк, как:<div class="row"></div>.

    • Строки должны содержаться в контейнере макета, чтобы дать им правильное выравнивание и отступы.
    • Только столбец (столбец) может быть прямым дочерним элементом строки (строки)

  3. используя подобныеcol-md-*чтобы определить набор столбцов и разместить их в строке.

    • Переменная*Представляет 12 равных дробных значений, занимаемых столбцом, а необязательные значения — от 1 до 12.
    • Если сумма дробных значений нескольких столбцов равна 12, расположение строк точно заполнено. Если оно больше 12, дополнительный столбец автоматически начнет новую строку.

  4. Вы можете добавить к столбцу что-то вродеcol-space-*,col-md-offset-*Такие предустановленные классы для определения расстояния между столбцами и смещения столбцов.

    • Если расстояние между столбцами больше 30 пикселей, используйте смещение столбца.

2. Адаптивные правила:

В-третьих, макет в ответ на опыт:

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

  2. Левый и правый макеты становятся верхним и нижним макетом, а содержимое справа помещается ниже.

  3. размер шрифта и интервал

/**
 * 作品：myreset.css
 * 维护：白小明
 * 更新：2017年11月24日
 * 理念：1. 适应中文，基于最新主流浏览器
 *       2. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
 *       3. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
 */

/* reset
   ========================================================================== */
@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
pre,dl, dt, dd, ul, ol, li,
form, fieldset, lengend, button, input, textarea,
th, td { margin: 0; padding: 0; }

ul, ol { list-style: none; }
a { text-decoration: none; }
q:before, q:after { content: ''; }
legend { color: #000; }
table { border-collapse: collapse; border-spacing: 0; }
button, textarea { font-size: 100%; border: 0; }
fieldset, img { border: 0; }

a:hover { -webkit-transition: all .5s; transition: all .5s; }

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* common
   ========================================================================== */
.fl { float: left; *display: inline; _display:inline; }
.fr { float: right; *display: inline; _display:inline; }
.clearfix:after { display: block; clear: both; content: ''; visibility: hidden; height: 0; }
.clearfix { *zoom: 1; }

/* 栅格系统，移动设备优先
   ========================================================================== */
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
.container-fluid { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }

.row { margin-left: -15px; margin-right: -15px; }
.row:before, .row:after { content: ""; display: table; clear: both; }

.hide-xs { display: none!important; }
.show-xs-block { display: block!important; }
.show-xs-inline { display: inline!important; }
.show-xs-inline-block { display: inline-block!important; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

.col-xs-1 { width: 8.33333333%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }

.col-xs-offset-1 { margin-left: 8.33333333%; }
.col-xs-offset-2 { margin-left: 16.66666667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-5 { margin-left: 41.66666667%; }
.col-xs-offset-6 { margin-left: 50%; }
.col-xs-offset-7 { margin-left: 58.33333333%; }
.col-xs-offset-8 { margin-left: 66.66666667%; }
.col-xs-offset-9 { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }
.col-xs-offset-12 { margin-left: 100%; }

@media screen and (min-width: 768px) {
  .container { width: 750px; }

  .hide-sm { display: none!important; }
  .show-sm-block { display: block!important; }
  .show-sm-inline { display: inline!important; }
  .show-sm-inline-block { display: inline-block!important; }

  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }

  .col-sm-1 { width: 8.33333333%; }
  .col-sm-2 { width: 16.66666667%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.33333333%; }
  .col-sm-5 { width: 41.66666667%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.33333333%; }
  .col-sm-8 { width: 66.66666667%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.33333333%; }
  .col-sm-11 { width: 91.66666667%; }
  .col-sm-12 { width: 100%; }

  .col-sm-offset-1 { margin-left: 8.33333333%; }
  .col-sm-offset-2 { margin-left: 16.66666667%; }
  .col-sm-offset-3 { margin-left: 25%; }
  .col-sm-offset-4 { margin-left: 33.33333333%; }
  .col-sm-offset-5 { margin-left: 41.66666667%; }
  .col-sm-offset-6 { margin-left: 50%; }
  .col-sm-offset-7 { margin-left: 58.33333333%; }
  .col-sm-offset-8 { margin-left: 66.66666667%; }
  .col-sm-offset-9 { margin-left: 75%; }
  .col-sm-offset-10 { margin-left: 83.33333333%; }
  .col-sm-offset-11 { margin-left: 91.66666667%; }
  .col-sm-offset-12 { margin-left: 100%; }
}

@media screen and (min-width: 992px) {
  .container { width: 970px; }

  .hide-md { display: none!important; }
  .show-md-block { display: block!important; }
  .show-md-inline { display: inline!important; }
  .show-md-inline-block { display: inline-block!important; }

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }

  .col-md-1 { width: 8.33333333%; }
  .col-md-2 { width: 16.66666667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.33333333%; }
  .col-md-5 { width: 41.66666667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.33333333%; }
  .col-md-8 { width: 66.66666667%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.33333333%; }
  .col-md-11 { width: 91.66666667%; }
  .col-md-12 { width: 100%; }

  .col-md-offset-1 { margin-left: 8.33333333%; }
  .col-md-offset-2 { margin-left: 16.66666667%; }
  .col-md-offset-3 { margin-left: 25%; }
  .col-md-offset-4 { margin-left: 33.33333333%; }
  .col-md-offset-5 { margin-left: 41.66666667%; }
  .col-md-offset-6 { margin-left: 50%; }
  .col-md-offset-7 { margin-left: 58.33333333%; }
  .col-md-offset-8 { margin-left: 66.66666667%; }
  .col-md-offset-9 { margin-left: 75%; }
  .col-md-offset-10 { margin-left: 83.33333333%; }
  .col-md-offset-11 { margin-left: 91.66666667%; }
  .col-md-offset-12 { margin-left: 100%; }
}

@media screen and (min-width: 1200px) {
  .container { width: 1170px; }

  .hide-lg { display: none!important; }
  .show-lg-block { display: block!important; }
  .show-lg-inline { display: inline!important; }
  .show-lg-inline-block { display: inline-block!important; }

  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }

  .col-lg-1 { width: 8.33333333%; }
  .col-lg-2 { width: 16.66666667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.33333333%; }
  .col-lg-5 { width: 41.66666667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.33333333%; }
  .col-lg-8 { width: 66.66666667%; }
  .col-lg-9 { width: 75%; }
  .col-lg-10 { width: 83.33333333%; }
  .col-lg-11 { width: 91.66666667%; }
  .col-lg-12 { width: 100%; }

  .col-lg-offset-1 { margin-left: 8.33333333%; }
  .col-lg-offset-2 { margin-left: 16.66666667%; }
  .col-lg-offset-3 { margin-left: 25%; }
  .col-lg-offset-4 { margin-left: 33.33333333%; }
  .col-lg-offset-5 { margin-left: 41.66666667%; }
  .col-lg-offset-6 { margin-left: 50%; }
  .col-lg-offset-7 { margin-left: 58.33333333%; }
  .col-lg-offset-8 { margin-left: 66.66666667%; }
  .col-lg-offset-9 { margin-left: 75%; }
  .col-lg-offset-10 { margin-left: 83.33333333%; }
  .col-lg-offset-11 { margin-left: 91.66666667%; }
  .col-lg-offset-12 { margin-left: 100%; }
}

Адаптивные изображения

Наконец, давайте поговорим об адаптивных изображениях.

В общем тот же баннер, на компе нужно использовать большую картинку, а вот на телефоне вроде маленькая цифра использовалась выше, иначе будет медленная загрузка ненужного потока и другие проблемы на телефоне, появилась отзывчивая картинка. Как этого добиться?

1. css3 media query

Один из способов - использоватьbackgound-imageВ сочетании с такими медиа-запросами:

.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}

Недостаток этого метода в том, что он не очень дружественный к SEO, потому что если вы используете тег img, вы также можете написать атрибут alt.

2. тег изображения

picturefill.min.js: Решить проблему, что браузеры, такие как IE, не поддерживают его.

<picture>
    <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
    <source srcset="banner_w800.jpg" media="(max-width: 800px)">
    <img src="banner_w800.jpg" alt="">
</picture>

<!-- picturefill.min.js 解决IE等浏览器不支持 <picture> 的问题 -->
<script type="text/javascript" src="js/vendor/picturefill.min.js"></script>

Как и выше, если ширина страницы превышает 800 пикселей (ПК), загружается большое изображение, а на мобильных телефонах загружается маленькое изображение. Таким образом, браузер загрузит только одно изображение в источнике. Но если его динамически вставить с помощью js, он все равно загрузит два, а при загрузке страницы инициализации в html будет загружен только один.

Картинка должна писать тег img, иначе ее нельзя отобразить.Работа картинки в итоге идет по img.Например, в теге img срабатывает событие onload.Картинка и исходник не будут выкладываться, а их ширина и высота равны 0. .

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

<picture>
    <source type="image/webp" srcset="banner.webp">
    <img src="banner.jpg" alt="">
</picture>

Объем webp можно уменьшить вдвое при сохранении того же разрешения, но пока его поддерживает только Chrome, Safari и firefox находятся в экспериментальной стадии, поэтому другие браузеры, такие как firefox, будут загружать фотографии в формате jpg:

3. srcset

<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">

Если ppi экрана равно 1, будет загружено изображение 1x, а если dpi = 2, будет загружено изображение 2x.В основном, dpi как мобильных телефонов, так и компьютеров Mac достигло 2 или более, так что для обычных экраны, это не будет тратить трафик, но для сетчатки Экран имеет высокое разрешение.

Если браузер не поддерживает srcset, изображения в src загружаются по умолчанию.

Но вы обнаружите, что это не так.В Chrome на Mac он одновременно загрузит изображение 2x в srcset, а также загрузит изображение в src и загрузит два изображения. Порядок заключается в том, чтобы сначала загрузить все srcsets, а затем загрузить src. Эта стратегия довольно странная, на самом деле загружает два изображения, если не прописать src, то не загрузит два изображения, но совместимость не очень. Это может быть из-за того, что браузер считает, что раз есть srcset, то нет необходимости писать src.Если src прописан, пользователю может быть полезно. И использование изображения не загрузит два

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

над.

Категории