Разговор об адаптивном веб-дизайне и идеях реализации

Вы все еще думаете об адаптации своего приложения для ПК, мобильных устройств и планшетов? Ищете набор кодов для адаптации к нескольким терминалам? Хотите быстро приступить к работе и внедрить кросс-терминальное приложение? Если да, то В этой статье описываются теоретические основы адаптивного дизайна пользовательского интерфейса, в том числе: размер экрана, физика, независимость от устройства, пиксели CSS, dpr, область просмотра и другие связанные концепции, а также основы адаптивного дизайна, общие шаблоны проектирования и основные идея реализации отзывчивого пользовательского интерфейса, надеясь углубить понимание и практические идеи отзывчивости.

Добро пожаловать в мой личный блог

Отзывчивый

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

Адаптивный веб-дизайн (RWD), относится к набору пользовательского интерфейса приложения (пользовательский интерфейс), который может автоматически реагировать на различные окна устройства или размер экрана (размер экрана) и содержание, производительность рендеринга макета хорошая.

Адаптивный

В дополнение к адаптивному дизайну (RWD) есть еще один способ адаптироваться к экранам нескольких устройств,Адаптивный веб-дизайн (AWD).

Адаптивный дизайн (AWD) означает, что приложение использует несколько версий пользовательского интерфейса, и для разных экранов устройств сервер возвращает разные версии пользовательского интерфейса для доступа пользователей.

Адаптивный против отзывчивого

Основные различия между адаптивным и отзывчивым дизайном сводятся к следующему:

Адаптивный — это несколько наборов пользовательских интерфейсов, в то время как последний имеет только один набор пользовательских интерфейсов;
Adaptive требует, чтобы сервер обнаружил информацию о разрешении запрошенного устройства, а затем выбрал соответствующую версию для возврата;
Адаптивный может использовать разные схемы адаптации в разных версиях, такие как проценты на ПК, rem на мобильных и т. д., тогда как адаптивный требует полностью совместимой схемы адаптации;
Возьмем, к примеру, главный веб-сайт, посетитеwww.toutiao.comСторона ПК откроет версию веб-приложения для ПК, а если она открыта на мобильной стороне, сторона сервера будет перенаправлена наm.toutiao.com, соответствующий возврат — веб-приложение мобильной версии;

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

Мобильный первый

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

Улучшение прогресса

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

экран

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

Физический размер (размер дисплея / физический размер)

Физический размер экрана относится к фактическому физическому размеру, измеренному в соответствии с диагональю экрана, точно так же, как мы обычно говорим, сколько дюймов составляет экран, будь то 5,1 или 5,5, является ли планшет 10,1, является ли телевизор 42 или 37 дюймов, дюймы здесь Оба относятся к (дюймам) и измеряются в длинах по диагонали.

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

Логический размер (логический размер / разрешение экрана)

В отличие от физического размера экрана существует понятие логического размера, или его называют разрешением экрана (разрешением).В отличие от физического размера, который измеряется в дюймах, логический размер измеряется в пикселях.

Dimension

В отличие от физического размера, который измеряет размер экрана в диагональном направлении, логический размер указывает размер экрана в горизонтальном (ширина) и вертикальном (высота) направлениях: ширина, высота. с одним“1024 × 768”Взяв в качестве примера ноутбук с высоким разрешением, это означает, что экран устройства имеет ширину 1024 пикселя и высоту 768 пикселов.

физический пиксель (пиксель устройства)

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

Так называемое растровое изображение или растровое изображение относится к определению изображения как состоящего из точек (или пикселей), каждая точка (или пиксель) может быть представлена множеством цветов, в том числе 2, 4, 8, 16, 24 и 32-битный цвет. Например, для 32-битного цветного изображения с разрешением 1024×768 число байтов памяти, которое оно занимает, равно:1024×768×32/(8*1024)=3072KB(Один байт равен 8 битам).

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

CSS пиксель

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

разрешающая способность

Под разрешением обычно понимается разрешение устройства, то есть сумма физических пикселей, отображаемых на экране устройства.“1024 × 768”Если взять в качестве примера ноутбук с высоким разрешением, это означает, что ширина экрана устройства составляет 1024 физических пикселя, а высота — 768 физических пикселей, а общее количество отображаемых пикселей составляет1024*768.

Плотность пикселей

На дюйм (PPI, пиксель на дюйм) или на сантиметр (PPCM, пиксель на сантиметр) экранафизические пиксели(или точечный) номер, называемыйплотность пикселей, также какплотность экрана, формула расчета:

pixel density(pd) =  屏幕宽度物理像素 ／ 屏幕宽度英寸；

Например, 15-дюймовое (по диагонали) устройство с экраном шириной 12 дюймов и высотой 9 дюймов с разрешением1024*768пикселей, то его плотность пикселей составляет около 85PPI:

pd = 1024 ／ 12 ～= 768 ／ 9 ～= 85PPI

Конечно, плотность пикселей по горизонтали и вертикали не всегда одинакова, например, при изменении разрешения в приведенном выше примере на1280×1024,но:

Пейзаж:pd = 1280 / 12 ~=107PPI;
Портрет:pd = 1024 / 9 ~= 114PPI;

Разрешение, преобразованное в плотность пикселей

Рассчитайте формулу плотности пикселей в соответствии с разрешением экрана, например:

wp: Разрешение по горизонтали в пикселях;
hp: Разрешение по вертикали в пикселях;
dp: разрешение по диагонали в пикселях;
di: Физический размер диагонали (дюймы);
Vpd: плотность пикселей, единица измерения — PPI;

Градация плотности

Для простоты Android группирует все плотности экрана в шесть общих плотностей: Низкая, Средняя, Высокая, Ультра, Ультра Ультра и Ультра Ультра Ультра. Принимая во внимание, что экраны с низкой плотностью имеют меньше физических пикселей в данной физической области, чем экраны с высокой плотностью.

точек на дюйм

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

Пиксели, не зависящие от устройства (dp/dip)

Аппаратно-независимый пиксель (аппаратно-независимый пиксель, называемый dp или dip), также называемыйНезависимые от плотности пиксели, является абстрактной единицей, основанной на физической плотности экрана. Впервые предложенный Google — это абстрактный модуль, который адаптируется к экранам многих Android-устройств. который можно использовать при определении макета пользовательского интерфейсавиртуальный пиксельЕдиницы, которые представляют размеры или положения макета.

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

Эта абстракция позволяет мобильным устройствам масштабировать и отображать информацию и пользовательские интерфейсы на разных экранах, а внутренняя графическая система может преобразовывать абстрактные измерения пикселей в приложении в фактические измерения пикселей, поэтому приложение может напрямую использовать абстрактные пиксели без программирования для работы с большое количество пикселей Устройства с физическим дифференцированием пикселей. Как правило, устройства Android предполагают независимый от устройства эталонный показатель пикселей экрана «средней» плотности:

一个设备独立像素（dp／dip）等于160 dpi（或PPI） 屏幕上的一个物理像素，即等于1 / 160英寸。

Windows определяет аппаратно-независимый пиксель как физический пиксель на экране с разрешением 96 точек на дюйм, то есть 1 дп равен 1/96 дюйма; система Apple по умолчанию определяет аппаратно-независимый пиксель как физический пиксель на экране с разрешением 72 точки на дюйм. Когда система работает, любое масштабирование в единицах dp прозрачно обрабатывается в соответствии с фактической плотностью текущего экрана.

Независимые от вычислительного устройства пиксели

Как рассчитать независимые от устройства пиксели устройства? В соответствии с приведенным выше введением можно получить следующие уравнения для dp и дюйма:

*ratio*: то есть соотношение по умолчанию, указанное системой устройства;
inch: физический размер, дюймы;

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

$1dp={\frac {V_{pd}}{ratio}}(PPI*inch)={\frac {V_{pd}}{ratio}}pixel$

Vpd: плотность пикселей устройства;
PPI*inch:pixel/inch * inch = pixel;

Например, при плотности экрана 240 точек на дюйм (или PPI), т. е.Vpd = 240, 1 провал равен 1,5 физическим пикселям (пикселям).

Соотношение пикселей устройства (dpr)

Что касается физических пикселей, независимых от устройства пикселей или пикселей CSS, существует очень распространенное понятие, отношение пикселей устройства (dpr), которое описывает, сколько фактических пикселей используется для рендеринга независимого от устройства пикселя.Оно рассчитывается как:

Ndp: фактическое количество пикселей на экране устройства;
Npx: количество независимых пикселей экрана устройства (обычно равно количеству пикселей CSS на стороне ПК);
dpr: соотношение пикселей устройства;

В браузере мы можем использоватьwindow.devicePixelRatioПолучите его значение dpr, экран устройства с более высоким dpr будет использовать больше физических пикселей для отображения независимого от устройства пикселя, поэтому эффект будет более тонким и утонченным. Например, на устройстве с dpr=2 1 аппаратно-независимый пиксель должен отображаться с использованием 4 физических пикселей, потому что ширина и высота в 2 раза больше.

Пиксели, не зависящие от устройства, и пиксели CSS

Соотношение пикселей устройства (dpr), представленное в предыдущем разделе, обычно относится к отношению физических пикселей к независимым от устройства пикселям. Мы знаем, что пиксели CSS в конечном итоге необходимо преобразовать в физические пиксели для отображения, поэтому как пиксели CSS соответствуют физическим пикселям. ?

Согласно предыдущему разделу об аппаратно-независимых пикселях, на конкретном устройстве отношение аппаратно-независимых пикселей к физическим пикселям является фиксированным;
На стороне ПК соотношение аппаратно-независимых пикселей и пикселей CSS обычно составляет 1: 1, а пиксели CSS могут быть преобразованы в физические пиксели с нормальным соотношением для отображения;
На мобильной стороне для лучшего отображения страницы масштабирование выполняется по умолчанию, в настоящее время соотношение аппаратно-независимых пикселей и пикселей CSS не 1:1, поэтому меняется соотношение пикселей CSS к физическим пикселям, поэтому мы видим изменения эффекта;
Когда мы явно устанавливаем область просмотра, используя метаданные области просмотраwidthКогда это идеальное окно просмотра, единицей ширины окна просмотра являются пиксели, не зависящие от устройства, и установитеintial-scale=1.0Это означает, что установите соотношение пикселей CSS и независимых от устройства пикселей на 1,0, тогда преобразование пикселей CSS в физические пиксели может хорошо показать наш пользовательский интерфейс.

Измерение пользовательского интерфейса

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

A dimension is specified with a number followed by a unit of measure

Размеры объявляются с использованием числа и единицы измерения, например 100 пикселей, 10 точек, 10 дюймов, 10 точек на дюйм и т. д.

дюймы (дюймы)

Inches - Based on the physical size of the screen.

Единица измерения, основанная на физическом размере экрана,in.

Пиксели пользовательского интерфейса (px)

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

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

фунты (pt)

Фунт, pt, то есть пункт, — распространенная в полиграфии единица измерения, равная 1/72 дюйма, это единица длины, абсолютный размер, а px — относительный размер.

пиксели и пт

Как упоминалось ранее, px — это относительный размер, а pt — абсолютный размер, поэтому на разных устройствах их соотношение может быть разным.一个dp等于160dpi屏幕上的一个物理像素,но:

1dp = 1 ／ 160 inch

И в сочетании с введенной ранее единицей pt:

1pt = 1 / 72 inch

Для экрана 240PPI тогда:

1dp = 1 / 160 inch = 240 / 160 px = 1.5物理像素;
1px = 1 / 240 inch;
1pt = 0.35物理像素 = 0.35 / dpr CSS像素(px);

em

em — единица масштабирования, используемая в веб-документах, 1em равна ближайшему родительскому элементу.font-sizeРазмер шрифта, если шрифт ближайшего родительского элемента 14pt, то1em=14pt. Размер, представленный единицей em, может лучше адаптировать стиль в браузере с несколькими терминалами.

rem

Rem также является единицей масштабирования. Подобно em, он основан на размере шрифта. Разница в том, что rem основан на размере шрифта корневого элемента документа и не имеет ничего общего с размером шрифта родительского элемента, например корневой элемент документа.<html>Свойство font-size равно 12pt, а шрифт ближайшего родительского элемента равен 14pt, тогда1rem=12pt.

Поскольку rem вычисляется на основе размера шрифта корневого элемента, единица измерения rem используется в любом месте документа для вычисления одного и того же эталона, так что расчет размера унифицирован, в то время как предыдущий em основан на ближайшем родительском элементе в документ.font-sizeзначение атрибута, описанное вfont-sizeЕдиница em используется в родительских элементах с разными значениями, и вычисление не может быть унифицировано, поэтому rem более распространен, чем em, в современных схемах адаптации ПК и мобильных устройств.

процент (%)

Существует также процентная единица %, которая основана на размере соответствующих свойств ближайшего родительского элемента, умноженном на выделенный процент.Например, если ширина родительского элемента составляет 10 пунктов, а размер шрифта: 14 пунктов , тогда ширина: 10% равна 1 пт, а размер шрифта: 110% равен 15,4 пт (фактический рендеринг браузером будет преобразован в целочисленный рендеринг). Особо следует отметить, чтоmargin,paddingКогда значение атрибута указано в процентах, оно основывается на текущем значении ширины элемента.

Единица % также является единицей масштабирования, поэтому ее часто используют для адаптации стиля.

окно просмотра

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

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

тип области просмотра

При разработке мобильных wap-приложений, чтобы разработать более удобный интерфейс, вам необходимо понимать больше концепций, связанных с областью просмотра.Обычно области просмотра делятся на три типа: визуальная область просмотра, область просмотра макета и идеальная область просмотра.

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

Визуальное окно просмотра определяется как:

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

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

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

в текущем новомпроект документа, уже определеноwindow.visualViewportAPI может получить объект визуального окна, к которому можно получить доступ в Chrome61 и более поздних версиях:

console.log(window.visualViewport.width);

window.visualViewportСвойства объекта, такие как:

`visualViewport`Атрибуты	инструкция
`offsetLeft`	Расстояние между визуальным окном просмотра и левой границей окна просмотра макета выражается в пикселях CSS;
`offsetTop`	Расстояние между визуальным окном просмотра и верхней границей окна просмотра макета выражается в пикселях CSS;
`pageLeft`	Расстояние смещения между левой границей визуального окна просмотра и левой строкой документа, выраженное в пикселях CSS;
`pageTop`	Расстояние смещения между верхней границей визуального окна просмотра и верхней границей документа, выраженное в пикселях CSS;
`width`	Ширина визуального окна просмотра в пикселях CSS;
`height`	Высота визуального окна просмотра в пикселях CSS;
`scale`	Коэффициент масштабирования, например, документ увеличивается на 2, возвращаемое значение`2`, На это значение не влияет соотношение пикселей устройства.`devicePixelRatio`Влияние.

видовой экран макета

Окно просмотра компоновки определяется следующим образом:

In the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.

В макетах CSS, например, ширина в процентах рассчитывается относительно области просмотра макета, которая обычно шире визуальной области просмотра.

Ширина области просмотра макета может быть переданаdocument.documenElement.clientWidthилиdocument.body.clientWidthчтобы получить.

Почему вьюпорт макета обычно шире визуального вьюпорта, это легко понять, взглянув на картинку:

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

Обычно браузеры устанавливают область просмотра макета по умолчанию как980 пикселей или 1024 пикселей, поэтому обычно вы увидите, что она больше видимой области экрана устройства, особенно на мобильных устройствах, и из различных примеров изображений, приведенных выше, вы можете видеть, что верхняяposition:fixedпанель навигации, которая всегда следует за окном просмотра макета,width: 100%Соответствует ширине области просмотра макета.

идеальное окно просмотра

Идеальное окно просмотра относится к размеру экрана устройства в аппаратно-независимых пикселях (виртуальные пиксели, которые фактически преобразуются в физические пиксели для отображения).

можно использовать идеальную ширину области просмотраscreen.widthЧтобы получить, его значение определяется устройством, которое является наиболее идеальным размером области просмотра макета для устройства. Например, идеальное окно просмотра iphone5:320, iphone6 есть375, iPhone7plus есть414.

Здесь область просмотра настроена на аппаратно-независимые пиксели, так как же она соответствует пикселям CSS, используемым пользовательским интерфейсом? Прежде всего, соотношение аппаратно-независимых пикселей и физических пикселей фиксируется на конкретном устройстве. Затем мы знаем, что аппаратно-независимые пиксели и пиксели CSS являются виртуальными единицами.На стороне ПК соотношение аппаратно-независимых пикселей и Пиксели CSS обычно имеют соотношение 1: 1. Пиксели CSS могут быть преобразованы в физические пиксели с нормальным соотношением для отображения, однако на мобильной стороне, чтобы лучше отображать страницу, по умолчанию содержимое будет масштабироваться в соответствии с размером. экрана. В настоящее время соотношение аппаратно-независимых пикселей и пикселей CSS не то же самое. 1:1, поэтому отношение пикселей CSS к физическим пикселям меняется, поэтому эффект, который мы видим, меняется, когда мы используем метаданные окна просмотра. чтобы явно установить ширину области просмотра в идеальную область просмотра, единицей ширины области просмотра являются независимые от устройства пиксели, а установка initial-scale=1.0 в то же время означает установку соотношения пикселя CSS и независимого от устройства пикселя на 1,0, затем преобразование пикселей CSS к физическим пикселям может хорошо показать наш пользовательский интерфейс.

viewport meta

На современных мобильных веб-страницах мы часто видим такой код:

 <meta name="viewport", width=device-width, initial-scale=1.0>

device-widthВозврат - это устройствоideal viewportШирина, этот код должен объявить, что текущий макет использует идеальную ширину области просмотра устройства.В этом случае идеальная область просмотра iphone6375Например, настройки htmlwidth: 100%, окончательная ширина320px.

для не установленmetaСтраница метакода области просмотра, область просмотра макета является значением по умолчанию при доступе к мобильному терминалу.980px, документ сжимается для полного отображения содержимого. В это время отношение пикселей CSS к физическим пикселям становится больше, то есть один физический пиксель отображает больше пикселей CSS. Эффект отображения следующий:

В настоящее времяvisualViewportИнформация об объекте следующая:

Окна просмотра и макеты

До появления iphone контент был скорректирован, чтобы адаптировать веб-сайт на стороне ПК, чтобы сделать его доступным в мобильном браузере; позже в iphone было предложено отображать содержимое веб-страницы в «виртуальном окне» (окне просмотра) и предоставлять элемент метаинформации области просмотра. для управления размером виртуального окна.

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

Окно просмотра макета по умолчанию

Для веб-сайта ПК нормальное отображение на стороне ПК выглядит следующим образом:

На мобильном терминале по умолчанию отображается следующее:

Мы даем документу html, а ширина тела устанавливается равнойwidth:100%, поэтому ширина html, body равна980px,ЭтоШирина области просмотра макета браузера по умолчанию;
По умолчанию область просмотра макета мобильного браузера составляет 980 пикселей, а затем в соответствии с содержимым страницызумЧтобы содержимое страницы могло быть полностью отображено в текущем видимом окне, при явно заданной ширине ширины:
1. Если ширина больше 980: устанавливаем такие элементы, как htmlwidth: 1200pxПосле этого область просмотра уменьшит макет для поддержки большего количества пикселей CSS, то есть один физический пиксель будет соответствовать большему количеству пикселей CSS, что визуально означает, что страница уменьшена, что также подтверждает, что пиксели CSS являются просто виртуальными пикселями;
2. Если ширина меньше 980: устанавливаем html и другие элементыwidth: 400pxПосле этого контент отображается в части области просмотра, а остальная часть пустая, визуально не масштабируется, а отображается в меньшей области, из-за чего текст заворачивается, а высота увеличивается;

Более особенным являетсяposition:fixed;Позиционированный верхний элемент панели навигации, который всегда соответствует области просмотра макета.

добавить мета

Добавьте код, чтобы добавить мета-окно просмотра на страницу:

<meta name="viewport" content="width=device-width,initial-scale=1.0>

После добавления приведенного выше кода четко установите для области просмотра макета идеальную ширину области просмотра, чтобы браузер мог идеально отображать нашу страницу, и страница не была увеличена. Конечно, когда мы задаем стиль элемента, его ширина не может превышать ширину окна просмотра макета, для iphone6 это375px; при превышении появится полоса прокрутки.

Медиа-запрос CSS3 (медиа-запрос)

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

Для портретных дисплеев с шириной области просмотра более 800 пикселей загрузите определенный файл css:
```
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:
800px)" href="800wide-portrait-screen.css" />
```
Распечатать специфичный для устройства css-файл:
```
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
```
Окно просмотра находится между 375 и 600, установите определенный размер шрифта 18px:
```
@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}
```

Основы реактивной реализации

Реализации адаптивного дизайна обычно учитывают следующие аспекты:

Комбинируйте такие методы, как потоковые макеты, флексбоксы (включая изображения, таблицы, видео) и медиа-запросы;
Используйте процентные макеты для создания гибких пользовательских интерфейсов с гибкими макетами, а также используйте медиа-запросы для ограничения размера элементов и диапазона изменений содержимого;
Используйте относительные единицы, чтобы сделать контент адаптивным;
Выберите точки останова, чтобы добиться разных макетов и отображения содержимого для разных точек останова;

Шаблоны адаптивного дизайна

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

Крошечные настройки

Режим макета Tiny Tweaks в основном отображает большую часть контента в одном столбце и изменяется по мере увеличения ширины области просмотра.font-sizeценность иpaddingинтервал, чтобы обеспечить постоянную читаемость содержимого.

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

.c1 {
  padding: 10px;
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    padding: 20px;
    font-size: 1.5rem;
  }
}

@media (min-width: 960px) {
  .c1 {
    padding: 40px;
    font-size: 2rem;
  }
}

Плавающий (в основном жидкий)

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

Суть плавающего макета заключается в том, чтобы плавать.Когда экран сжимается, последующие столбцы плавают, обычно float/flex + width, а затем используют медиа-запрос для установки разных значений ширины.

В качестве примера возьмем следующую структуру html:

<!--Pattern HTML-->
<div id="pattern" class="pattern">
  <div class="c">
    <div class="main">
      <h2>Main Content (1st in source order)</h2>
      <p>1</p>
    </div>
    <div class="c2">
      <h3>Column (2nd in source order)</h3>
      <p>3</p>
    </div>
    <div class="c3">
      <h3>Column (3nd in source order)</h3>
      <p>4.</p>
    </div>
  </div>
</div>
<!--End Pattern HTML-->

Его стили обычно следующие:

.main {
  background-color: #8e352e;
}

.c2 {
  background-color: #c84c44;
}

.c3{
  background-color: #a53d36;
}

@media screen and (min-width: 37.5em) {
  .c2, .c3 {
    float: left;
    width: 50%;
  }
}

Когда ширина экрана превышает 31,42 em, размер шрифта браузера по умолчанию составляет 16 пикселей, тогда37.5 * 16 = 600px, когда размер пикселя превышает 600 пикселей, два нижележащих элемента div будут перемещаться и отображаться рядом друг с другом, в противном случае они будут отображаться вертикально друг за другом.

Падение столбца

Column Drop также является методом компоновки с несколькими столбцами. Он располагается вертикально на мобильной стороне, а столбцы располагаются плиткой по мере увеличения экрана. Этот режим требует от нас выбора нескольких точек останова и выбора меняющихся столбцов.

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

<!--Pattern HTML-->
  <div id="pattern" class="pattern">
    <div class="c">
      <div class="main">
        <h2>Main Content (1st in source order)</h2>
        <p>1</p>
      </div>
            <div class="sb">
                <h3>Column (2nd in source order)</h3>
                <p>2</p>
            </div>
            <div class="sb-2">
                <h3>Column (3nd in source order)</h3>
                <p>3</p>
                
            </div>
        </div>
    </div>
    <!--End Pattern HTML-->

Стиль как:

.main {
  background-color: #8e352e;
}

.sb {
  background-color: #c84c44;
}

.sb-2 {
  background-color: #a53d36;
}
@media screen and (min-width: 42em) {
  .main {
    width: 75%;
    float: left;
    padding: 0 1em 0 0;
  }
  .sb {
    float: left;
    width: 25%;
    
  }
  .sb-2 {
    clear: both;
  }
}
@media screen and (min-width: 62em) {
  .main {
    width: 50%;
    margin-left: 25%;
    padding: 0 1em;
  }
  .sb {
    margin-left: -75%;
  }
  .sb-2 {
    float: right;
    width: 25%;
    clear: none;
  }
}

Сдвиг макета

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

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

Тип разделения (OFF Canvas)

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

На устройствах с маленьким экраном размещайте нечастый или второстепенный контент (такой как навигация и меню) слева и справа за пределами экрана и щелкайте для переключения отображения/скрытия;
При желании разложить на большом экране;

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

Обычной практикой является размещение редко используемого контента на маленьких экранах.display: none;илиtransform: translate(-200px, 0);, а затем при нажатии кнопки «Открыть» добавьте стиль восстановленияdisplay: block;илиtransform: translate(0, 0);, вы можете отобразить его; на большом экране вы можете выборочно спроектировать метод отображения, обычно прямо мозаично.

Отзывчивая реализация

Теоретические знания почти готовы, реализуем на простом примере.

установить область просмотра

Добавьте мета-код области просмотра внутри html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-widthУкажите область просмотра как идеальную область просмотра, чтобы страница могла хорошо отображаться с использованием текущей области просмотра (независимые от устройства пиксели);
initial-scale=1Указывает отношение пикселя CSS к независимому от устройства пикселю 1:1.

intial-scale=1.0То есть, чтобы предотвратить автоматическое изменение размера страницы мобильными браузерами, браузер будет отображать страницу в соответствии с фактическим размером окна просмотра (здесь установлено идеальное окно просмотра).

Конечно, его также можно объявить через CSS@viewport, что имеет тот же эффект, что и метатег:

@viewport {
  width: device-width;
  zoom: 1;
}

Среди них атрибут масштабирования эквивалентен атрибуту initial-scale метатега окна просмотра.

запросы средств массовой информации

В настоящее время все основные браузеры в основном поддерживают запросы meida, но если вы ожидаете, что ваш веб-сайт будет хорошо отображаться в IE8 или даже ниже, вам необходимо добавить совместимость.Вы можете использовать media-queries.js или response.js:

<!--[if lt IE 9]>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Установить точки останова (точки останова)

Еще один важный вопрос для адаптивного дизайна — как определить контрольные точки просмотра, зависит ли он от устройства? Конечно нет, устройства бесконечны Лучше всего использовать контент в качестве основы, а затем начинать с мобильных устройств, увеличивать отображаемый контент на экране от маленького до большого и определять несколько точек останова, которые мы ожидаем, и разрабатывать Пользовательский интерфейс соответственно.

Взяв в качестве примера material-ui, он делится на:

xs, extra-small: > 0
sm, small: >= 600
md, medium: >= 960
lg, large: >= 1280
xl, xlarge: >= 1920

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

/* for 1280px or less */
@media screen and (max-width: 1280px) {
  #pagewrap {
    width: 95%;
  }
  #content {
    width: 65%;
  }
  #sidebar {
    width: 30%;
  }
}
/* for 960px or less */
@media screen and (max-width: 960px) {
  #content {
  	width: auto;
  	float: none;
  }
  #sidebar {
  	width: auto;
  	float: none;
  }
}
 
/* for 600px or less */
@media screen and (max-width: 600px) {
  h1 {
    font-size: 0.8em;
  }
  #sidebar {
    display: none;
  }
}

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

@media (min-width: 360px) {
  body {
    font-size: 1rem;
  }
}

Относительная единица

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

Например, чтобы установить контейнер divwidth: 100%;Это гарантирует, что он заполняет всю ширину области просмотра и не является ни слишком большим, ни слишком маленьким по отношению к области просмотра, независимо от того, является ли устройство iPhone 5 с шириной 320 пикселей, iPhone 6 с шириной 375 пикселей или Nexus 5 с ширина 360 пикселей, div поместится на экранах этих устройств, кроме того, использование относительных единиц автоматически регулирует пространство размера контента без горизонтальных полос прокрутки.

.wrap {
  width: 320px;
  font-size: 20px;
}
// 相对单位
.wrap {
  width: 100%;
  font-size: 1.25rem;
}

Относительными единицами являются проценты (%), em, бэр и т. д.

отзывчивый текст

Исследование читабельности веб-сайта показало, что удобная для чтения строка абзаца должна содержать от 70 до 100 символов, обычно 8-15 английских слов и 20-50 китайских иероглифов, поэтому необходимо контролировать точку останова просмотра:

width: 100%;
padding: 10px;
@media screen (max-width: 600px) {
  .article {
    width: 100%;
    papdding: 15px;
    margin: 0 auto;
    font-size: 1rem;
  }
}

@media screen (min-width: 600px) and (max-width: 960px) {
  .article {
    max-width: 700px;
    margin-left: 0 auto;
  }
}

Как и выше, на меньшем экране размер шрифта 1rem может отлично отобразить около 20-30 китайцев в строке, а на большом экране нужно добавить точки останова, например, когда ширина браузера превышает 600 пикселей. Тогда идеальная ширина содержание составляет 100%, а максимальная идеальная ширина — 700 пикселей.

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

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

Гибкая компоновка изображений

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

.img-wrap {
  width: 100%;
}
img { max-width: 100%; }

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

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

.img-wrap {
  max-width: 200px;
}

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

Это конец? Конечно, нет. Обычно на стороне ПК необходимо использовать изображения большого размера для отображения, но на мобильной стороне из-за ограниченной полосы пропускания и сетевого трафика определенно не подходит для использования изображений большого размера, а также содержимого изображения. должен быть отзывчивым. Мы должны предоставить разные размеры экрана. Для изображений подготовьте большие изображения для больших экранов, меньшие четкие изображения для маленьких экранов и изображения с высоким разрешением на дисплеях с высоким разрешением (2x, 3x), чтобы обеспечить четкость.

srcset

srcsetАтрибуты улучшеныimgПоведение элемента, мы можем предоставить изображения разного размера для разных устройств. Похоже на нативный CSSimage-set CSS-функции,srcsetТакже позволяет браузеру автоматически выбирать наилучшее изображение на основе характеристик устройства, например, используя 2-кратное изображение на 2-кратном дисплее.

<img src="photo.png" srcset="photo@2x.png 2x" />

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

Конечно, совместимость этого метода в настоящее время не оптимистична, и он редко используется.

арт-дирекшн (картинка)

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

<picture>
  <source media="(max-width: 599px)" srcset="profile-s.png">
  <source media="(min-width: 600px)" srcset="profile-600w.png">
  <img src="profile-600w.png" alt="Progile">
</picture>

pictureэлемент содержитsourceСписок элементов, браузер может выбрать конкретное исходное изображение в соответствии с текущими характеристиками устройства, а затем необходимо объявитьimgэлемент предоставляет изображение по умолчанию;
<source>элемент содержитmediaАтрибут, этот атрибут является состоянием мультимедиа, в соответствии с этим условием, чтобы решить, какое изображение отображать, сверху вниз, когда условие соответствия истинно, отображается соответствующее изображение. В приведенном выше примере, если ширина области просмотра не превышает 599 пикселей, первый<source>элементsrcsetУказанная картинка, если ширина окна больше или равна 600px, отображается вторая картинка;
srcsetСвойство содержит путь к отображаемому изображению. Обратите внимание, что, как мы<img>Как видно выше,<source>Вы можете использовать несколько ссылок на изображенияsrcsetсвойства иsizesАтрибуты. Поэтому поддержите через<picture>Элемент предоставляет несколько изображений, а также может предоставлять изображения с несколькими разрешениями для каждого изображения, но обычно требуется меньше;
Последнее, что следует отметить, это то, что мы всегда должны быть в</picture>обеспечить прикрытие<img>элемент и егоsrcиaltсвойство, в противном случае изображение не будет отображаться и будет загружено, когда ни одно из условий мультимедиа не соответствуетimgпредоставленные изображения; дополнительно, если браузер не поддерживает<picture>элемент, также будет использовать это по умолчаниюimgзамена элемента;

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

Суммировать

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