Принцип и схема адаптивной верстки фронтенда (подробная версия)

Отзывчивый дизайн
Принцип и схема адаптивной верстки фронтенда (подробная версия)

введение

Адаптивный макет означает, что одна и та же страница имеет разные макеты на разных размерах экрана. Традиционный метод разработки заключается в разработке одного набора на стороне ПК и другого на мобильном терминале, в то время как при использовании адаптивного макета требуется разработать только один набор.CSSТяжелее. Ниже приведены результаты адаптации сайта блога к различным устройствам, а именно:iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900).

Разница между отзывчивым дизайном и адаптивным дизайном: отзывчивая разработка набора интерфейсов отображает разные макеты и контент, определяя разрешение области просмотра и выполняя обработку кода на клиенте для разных клиентов; адаптивная разработка требует разработки нескольких наборов интерфейсов, путем обнаружения разрешение области просмотра, чтобы определить, является ли устройство, к которому в данный момент осуществляется доступ, ПК, планшетом или мобильным телефоном, чтобы запросить уровень службы и вернуть разные страницы.

Реализация адаптивной верстки

1. Медиа-запросы

CSS3Медиа-запросы позволяют нам определять разные стили для разных типов мультимедиа.При изменении размера окна браузера страница также перерисовывается в соответствии с шириной и высотой браузера.

Как выбрать точку разделения экрана

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

img

если мы выберем600px,900px,1200px,1800pxВ качестве точки разделения его можно адаптировать к 14 распространенным моделям:

img

Конечно, это только одна из схем деления, можно разделить и так:480px,800px,1400px,1400px

img

Как типичная адаптивная структура макета,BootstrapКак делается точка останова?

img

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

Сначала мобильные устройства ИЛИ ПК

Независимо от того, ориентирован ли он на мобильные устройства или ПК, он основан на том факте, что при увеличении или уменьшении ширины экрана стили на заднем плане переопределяют стили на переднем плане. Таким образом, Mobile First использует первыйmin-width, сторона ПК предпочтительнееmax-width.

Мобильный прежде всего:

/* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;
    }
}
/* pc */
@media screen and (min-width: 1100px) {
    body {
      background-color: black;
    }
}

ПК сначала:

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

2. Процентная раскладка

Через процентную единицу ширину и высоту компонента в браузере можно изменить с помощью высоты браузера, чтобы добиться адаптивного эффекта. Система сетки в Bootstrap использует проценты для определения ширины и высоты элементов.CSS3Поддержка максимальной и минимальной высоты, вы можете комбинировать проценты иmax(min)Используются вместе для определения ширины и высоты элементов на разных устройствах.

/* pc width > 1100px */
html, body { margin: 0;padding: 0;width: 100%;height: 100%;}
aside {
    width: 10%;
    height: 100%;
    background-color: red;
    float: left;
}
main {
    height: 100%;
    background-color: blue;
    overflow: hidden;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    aside {
      width: 8%;
      background-color: yellow;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: green;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: blue;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    aside {
      float: none;
      width: 100%;
      height: 3%;
      background-color: black;
    }
    main {
      height: calc(100vh - 3%);
      background-color: red;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    aside {
      float: none;
      width: 100%;
      height: 7%;
      background-color: green;
    }
    main {
      height: calc(100vh - 7%);
      background-color: red;
    }
}

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

дочерний элементheightилиwidthИспользование процентов в , относится к непосредственному родительскому элементу дочернего элемента,widthотносительно родительского элементаwidth,heightотносительно родительского элементаheight; дочерний элементtopиbottomЕсли задан процент, относительно прямого не-staticВысота родительского элемента позиционирования (позиционирование по умолчанию), такая же, как высота дочернего элементаleftиrightЕсли задан процент, относительно прямого не-staticШирина позиционированного (позиционированного по умолчанию) родительского элемента; ширина дочернего элементаpaddingЕсли вы устанавливаете процент по вертикали или по горизонтали, он относится к непосредственному родительскому элементу.width, а родительский элементheightЭто не имеет значения. иpaddingТакой же,marginТо же самое верно для дочерних элементовmarginЕсли установлено значение в процентах как по вертикали, так и по горизонтали, оно относится к непосредственному родительскому элементу.width;border-radiusне то же самое, если установленоborder-radiusв процентах, это относительно его собственной ширины, за исключениемborder-radiusКроме того, существуют такжеtranslate,background-sizeи т. д. относятся к себе;

Из приведенного выше введения в процентную единицу мы можем легко увидеть, что если все процентные единицы используются для реализации адаптивного макета, есть два очевидных недостатка:

  • Вычисление сложное, если мы хотим определить ширину и высоту элемента, согласно проекту дизайна, это должно быть преобразовано в процентную единицу.
  • Можно видеть, что если в каждом атрибуте используется процент, атрибут относительно родительского элемента не уникален. Напримерwidthиheightотносительно родительского элементаwidthиheight,иmargin,paddingКак вертикальное, так и горизонтальное направления относятся к ширине родительского элемента,border-radiusЭто относительно самого элемента и т. Д., Что позволяет нам легко использовать процентные единицы для усложнения проблем с макетом.

3.rem макет

REMдаCSS3Недавно добавленный модуль хорошо поддерживается мобильным терминалом, поддерживаются как Android2.x+, так и ios5+.remЕдиницы измерения относятся к корневому элементу html.font-sizeдля определения размера корневого элементаfont-sizeЭквивалентно предоставлению эталона, когда размер страницы изменяется, нужно только изменитьfont-sizeзначение, то сremРазмер элементов, которые являются фиксированными единицами, также изменяется в ответ. Следовательно, если поremЧтобы добиться адаптивного макета, вам нужно только динамически изменяться в соответствии с размером контейнера представления.font-sizeможет (покаemотносительно родительского элемента).

идеи адаптивного макета rem:

  • Как правило, не устанавливайте определенную ширину для элемента, но для некоторых небольших значков вы можете установить определенное значение ширины.
  • Значение высоты может быть установлено на фиксированное значение.Каким бы ни был проектный проект, мы будем строго ограничивать его размер.
  • Используются все установленные фиксированные значенияremСделайте единицы (сначала установите базовое значение в итоге HTML:pxиremСоответствующее соотношение , а потом получить его на рендерахpxзначение, которое преобразуется вremценность)
  • js получает ширину реального экрана, делит ее на ширину эскиза проекта, вычисляет соотношение и сбрасывает предыдущее эталонное значение в соответствии с соотношением, чтобы проект можно было адаптировать на мобильном терминале.

Недостатки rem-макета:

В адаптивном макете корневой элемент должен динамически управляться через js.font-sizeРазмер стиля css и кода js имеют определенную степень связи и должны быть изменены.font-sizeКод помещается вcssперед стилем

/*上述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。*/
function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

REMВ настоящее время макет также является лучшим способом адаптации к нескольким экранам. По умолчанию наши html-тегиfont-sizeДля 16px мы используем медиа-запросы, чтобы установить размер шрифта для разных устройств.

/* pc width > 1100px */
html{ font-size: 100%;}
body {
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
      background-color: green;
      font-size: 1.3rem;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
      background-color: blue;
      font-size: 1.25rem;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
      font-size: 1.125rem;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
      background-color: #0FF000;
      font-size: 1rem;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
      background-color: #0FF000;
      font-size: 0.75rem;
    }
}

4. Единицы области просмотра

css3Введен новый блок вvw/vh, относительно смотрового окна,vwпредставляет ширину относительно окна просмотра,vhПредставляет относительно высоты окна просмотра, за исключениемvwиvhКроме того, естьvminиvmaxдве взаимосвязанные единицы. Конкретное значение каждой единицы заключается в следующем:

единица измерения значение
vw Относительно ширины области просмотра 1vw равен 1% ширины области просмотра, то есть ширина области просмотра равна 100vw.
vh Относительно высоты области просмотра 1vh равен 1% высоты области просмотра, то есть высота области просмотра составляет 100vh.
vmin меньшее значение в vw и vh
vmax Большее значение vw и vh

Измеряется в единицах области просмотра, ширина области просмотра составляет 100vw, а высота — 100vh (левая сторона — книжная, правая — альбомная). Например, размер области просмотра десктопного браузера составляет 650 пикселей, тогда 1vw = 650 * 1% = 6,5 пикселей (это теоретический расчет, если браузер не поддерживает 0,5 пикселей, фактический результат рендеринга может быть 7 пикселей).

Тогда vw или vh очень похожи на процентные единицы. Разница между vw и %:

единица измерения значение
% Большинство из них относятся к элементам-предкам, но также и к самим себе (граница-радиус, перевод и т. д.).
vw/vh Размер относительно области просмотра

Из сравнения мы можем найти, что,vwЕдиница похожа на процент, но есть разница в единице измерения. Ранее мы ввели сложность преобразования единицы процента. ЗдесьvwБольше похоже на "идеальную процентную единицу". Элементы любого уровня, при использованииvwВ случае единиц 1vw равно одной сотой ширины представления.

Есть два способа реализовать отзывчивость с помощью единиц измерения области просмотра:

1. Используйте только vw в качестве единицы CSS

  • Для перевода размера проектного чертежа в единицы измерения мы используемSassкомпиляция функций

    //iPhone 6尺寸作为设计稿基准
$vm_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}

  • Используются как ширина текста, так и макета, интервалы и т. д.vwкак единое целое

    .mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10); // 内间距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10); // 字体大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40); // 宽度
                height: vm(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

  • 1 линия физического пикселя (то есть 1 пиксель на обычном экране, 0,5 пикселя на экране высокой четкости) принимаетtransformАтрибутыscaleвыполнить

    .mod_grid {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

  • Для изображений, которым необходимо поддерживать пропорции, следует использоватьpadding-topвыполнить

    .mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}
2. С фольксвагеном и рем

Хотя с помощьюvwАдаптированная страница работает очень хорошо, но это макет, реализованный с использованием единиц измерения области просмотра, которые автоматически масштабируются в зависимости от размера области просмотра.Независимо от того, является ли область просмотра слишком большой или слишком маленькой, со временем она становится слишком большой или слишком маленькой и теряет предел максимальной и минимальной ширины, в это время мы можем комбинироватьremреализовать макет

  • Установите размер корневого элемента для изменения в области просмотраvwюнит, поэтому вы можете динамически изменять его размер

  • Ограничьте максимальный и минимальный размер шрифта корневого элемента с помощьюbodyплюс максимальная ширина и минимальная ширина

    // rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

5. Отзывчивое изображение

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

1. Используйте максимальную ширину (адаптивное изображение):

Адаптивность изображения означает, что изображение можно масштабировать в соответствии с размером контейнера. Можно использовать следующий код:

img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

inline-blockЭлемент визуализируется встроенным по отношению к окружающему его содержимому, но, в отличие от встроенного, в этом случае мы можем установить ширину и высоту.max-widthГарантируется, что изображение может быть расширено с той же шириной, что и контейнер (то есть для обеспечения того, чтобы все изображения отображались максимум на 100% от самих себя. В это время, если элемент, содержащий изображение, меньше, чем собственной ширины изображения, изображение будет масштабироваться, чтобы заполнить максимально доступное пространство), иheightзаautoЭто может обеспечить пропорциональное масштабирование изображения без искажений. Если это фоновое изображение, используйте его гибкоbackground-sizeАтрибуты.

Так почему бы не использоватьwidth：100%Шерстяная ткань? Потому что это правило заставит его казаться таким же широким, как и его контейнер. В случаях, когда контейнер намного шире изображения, изображение будет излишне растянуто.

2. Используйте исходный набор
<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">

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

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

Но вы обнаружите, что это не так, в Chrome на Mac он загружается одновременноsrcsetТот внутри 2x, а тот внутри src будет загружен снова, и будут загружены две картинки. Приказ поставить всеsrcsetПосле завершения загрузки перейдите к загрузке файла src. Эта стратегия довольно странная, на самом деле загружает два изображения, если src не прописан, то два изображения не загружаются, но совместимость не очень. Это может быть связано с тем, что браузер считает, что, поскольку существуетsrcsetНет необходимости писать src.Если src написан, пользователь может быть полезен. при использованииpictureне загружается два

3. Используйте фоновое изображение
.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}
4. Используйте тег изображения

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>

pictureТег img должен быть прописан, иначе его нельзя отобразить, даpicturОперация e, наконец, на img, Например, событие onload запускается в теге img.pictureиsourceМакета не будет, их ширина и высота равны 0.

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

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

Суммировать: реализация адаптивного макета может быть достигнута с помощью медиа-запросов +px, Медиа-запросы + Процент, Медиа-запросы +rem+js,vm/vh,vm/vh +remОни достигаются несколькими способами. Однако у каждого метода есть свои недостатки.Медиа-запросы должны выбирать ширину и размер основных устройств в качестве контрольных точек для написания дополнительных стилей для адаптации, но это будет более проблематично и может использоваться только для выбранных основных размеров устройств. идеально подходит, а взаимодействие с пользователем не является дружественным.Раскладка остается неизменной при разрешении в диапазоне точек останова ответа, а в момент реакции на переключение точки останова раскладка вызывает прерывистые изменения переключения, как кассетный проигрыватель "Какака" снова и снова. Адаптация в процентах, во-первых, трудоемка с точки зрения вычислений.Во-вторых, если проценты используются в каждом атрибуте, атрибуты относительных элементов не уникальны, что позволяет нам легко использовать процентные единицы для усложнения проблемы компоновки. принявremЭластичная верстка динамического расчета блока требует встраивания в голову скрипта для отслеживания смены разрешения для динамического изменения размера шрифта корневого элемента, чтобыCSSиJSсоединены вместе. с использованием чистогоcssСтраница, адаптированная к блоку вьюпорта, может решить не только проблему отклика фейлов, но и решить проблему зависимостей скриптов, но совместимость не вполне приемлемая.

Адаптивная схема формирования макета

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

  • Используйте описанные выше методы для самостоятельной реализации, такие как CSS3 Media Query, rem, vw и т. д.
  • Flex гибкая компоновка, плохая совместимость
  • Макет сетки, плохая совместимость
  • Системе сетки Columns часто приходится полагаться на библиотеку пользовательского интерфейса, такую ​​как Bootstrap.

Основы адаптивных макетов

В реальных проектах нам может понадобиться синтезировать вышеуказанные решения, например, использоватьremДля адаптации шрифта используйтеsrcsetЧтобы сделать изображение отзывчивым, можно использовать ширинуrem,flex, система сеток и т. д. для достижения отзывчивости, и тогда вам может понадобиться использовать медиазапросы как основу для адаптивной верстки.Поэтому, комбинируя приведенные выше схемы реализации, вам необходимо обратить внимание на следующие моменты при реализации адаптивной верстки в вашем проекте :

  • установить область просмотра
  • запросы средств массовой информации
  • Адаптация шрифта (шрифтовая единица)
  • процентное расположение
  • Адаптация изображения (отзывчивость изображения)
  • В сочетании с flex, grid, BFC, grid system и другими уже сформированными решениями

Справочная статья:

  1. Сравнение распространенных решений для адаптивных макетов (медиа-запросы, проценты, rem и vw/vh)
  2. Чистый CSS3 использует единицы измерения окна просмотра vw и vh для адаптивного
  3. Вы действительно понимаете адаптивную верстку?
  4. Мобильная страница H5 iphone6 ​​навыки адаптации
  5. Опыт адаптивной разработки
  6. Подробное объяснение адаптивного макета интерфейса, адаптивных изображений и самодельной системы сетки.
  7. Практика адаптивной верстки на основе медиазапросов и rem
  8. Думая о дизайне внешнего интерфейса и рабочем процессе, исходя из размера шрифта NetEase и Taobao
  9. Сравнение решений для мобильной фронтенд-адаптации
Категории