Оригинальный адрес моего блога:исходный адресЕсли статья была вам полезна, ваша звездочка — лучшая поддержка для меня~
Краткое введение: при разработке интерфейса статические веб-страницы обычно необходимо адаптировать к устройствам с разным разрешением.Обычные адаптивные решения включают медиа-запросы, проценты, rem и vw/vh. Начиная с единицы px, в этой статье анализируются недостатки px в мобильной верстке, а затем представляются несколько различных адаптивных решений.
- px и область просмотра
- запросы средств массовой информации
- процент
- rem решения в адаптивных сценариях
- Адаптивный через vw/vh
1. px и область просмотра
На статических веб-страницах мы часто используем пиксели (px) в качестве единиц измерения для описания ширины, высоты и информации о расположении элемента. Что касается ПК, обычно считается, что в CSS реальная длина, представленная в 1 пиксель, фиксирована.
Итак, действительно ли px является аппаратно-независимым, фиксированным размером, таким как метры и дециметры в единицах длины?
Ответ — нет. Рисунок 1.1 и Рисунок 1.2 ниже представляют результаты отображения на стороне ПК и на стороне мобильного устройства соответственно Размер шрифта, который мы установили на веб-странице, составляет 16 пикселей.
Рис. 1.1. Результат отображения при размере шрифта 16 пикселей на стороне ПК.
Рис. 1.2. Результат отображения при размере шрифта 16 пикселей на мобильной стороне.
Как видно из сравнения двух вышеприведенных картинок, шрифты все 16px.Очевидно, что на ПК текст отображается нормально, а вот на мобильной стороне текст очень мелкий и его почти не видно.Это значит, что 1px не является фиксированным размером в CSS. Мы обнаружили, что длина, представленная 1px на мобильной стороне, меньше, поэтому текст отображается нечетко.
Так что же именно определяет реальную длину 1 пикселя в CSS?
Чтобы прояснить эту концепцию, мы сначала вводим понятие пикселя и окна просмотра.
1. Пиксели
Пиксели являются основой макета веб-страницы. Пиксель представляет собой наименьшую область, которая может отображаться на экране компьютера. Пиксели делятся на два типа: пиксели CSS и физические пиксели.
Единица px, которую мы используем в коде js или css, относится к пикселям css, а физические пиксели также называются пикселями устройства, которые связаны только с устройством или оборудованием.Для экранов одинакового размера, чем выше плотность устройства, тем выше больше физических пикселей. В следующей таблице показано конкретное различие между пикселями CSS и физическими пикселями:
| CSS пиксель | Для веб-разработчиков — абстрактная единица, используемая в CSS. |
|---|---|
| физический пиксель | Только связанные с аппаратной плотностью устройства, физические пиксели любого устройства фиксированы. |
Итак, какова связь преобразования между пикселями CSS и физическими пикселями? Чтобы прояснить отношения преобразования между пикселями CSS и физическими пикселями, вы должны сначала понять, что такое область просмотра.
2. Окно просмотра
Широкая область просмотра – это область экрана, в которой браузер отображает содержимое. Узкая область просмотра – это область просмотра макета, область визуального просмотра и идеальная область просмотра.
(1) Окно просмотра макета
Окно просмотра макета определяет поведение макета веб-страницы ПК на мобильной стороне по умолчанию, поскольку разрешение ПК обычно больше, а размер окна просмотра макета по умолчанию равен 980 пикселей. То есть, без установки области просмотра веб-страницы, веб-страница на стороне ПК будет отображаться на мобильном терминале на основе области просмотра макета по умолчанию. Таким образом, мы можем ясно видеть, что когда используется окно просмотра макета по умолчанию, веб-страница с корнем на стороне ПК очень размыта на мобильной стороне.
(2) Визуальное окно просмотра
Визуальное окно просмотра представляет собой область отображения веб-сайта, видимую в браузере, и пользователь может изменять визуальное окно просмотра, увеличивая и увеличивая масштаб для просмотра отображаемого содержимого веб-страницы. Определение визуального окна просмотра похоже на увеличительное стекло для наблюдения за одним и тем же объектом с разных расстояний.Визуальное окно просмотра похоже только на содержимое, отображаемое в увеличительном стекле, поэтому визуальное окно просмотра не влияет на ширину и высоту макета. окно просмотра.
(3) Идеальное окно просмотра
Идеальный экран просмотра или его следует называть «порт просмотра идеального макета», в случае мобильных устройств, относится к разрешению устройства. Другими словами, идеальное окно просмотра или разрешение — это лучший «окно просмотра макета» с учетом физических пикселей устройства.
Среди приведенных выше видовых экранов наиболее важным является разъяснение концепции идеального видового экрана.Какова связь между идеальным видовым экраном или разрешением и физическими пикселями в мобильном терминале?
Чтобы прояснить взаимосвязь между разрешением и физическими пикселями, мы вводим соотношение пикселей устройства, представленное DPR (соотношение пикселей устройства), которое можно записать как:
1 DPR = 物理像素／分辨率
В случае без масштабирования один CSS пиксель соответствует одному DPR, то есть без масштабирования
1 CSS像素 = 物理像素／分辨率
Кроме того, в верстке мобильного терминала мы можем управлять версткой через метатег viewport.Например, в общем случае мы можем сделать верстку мобильного терминала под идеальный вьюпорт через следующие теги:
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
Детали каждого атрибута вышеуказанных метатегов следующие:
| Имя свойства | стоимость | описывать |
|---|---|---|
| width | положительное число | Определяет ширину области просмотра макета в пикселях. |
| height | положительное число | Определяет высоту области просмотра макета в пикселях, используется редко. |
| initial-scale | [0,10] | Начальное масштабирование, 1 означает отсутствие масштабирования |
| minimum-scale | [0,10] | Минимальный коэффициент масштабирования |
| maximum-scale | [0,10] | максимальный зум |
| user-scalable | да нет | Разрешить ли ручное масштабирование страницы, значение по умолчанию — «да». |
Среди них давайте посмотрим на атрибут ширины. В мобильной раскладке мы будем называть настройку ширины device-width в метатеге. Device-width обычно означает ширину разрешения. Через настройку width=device-width, мы будем Окно просмотра макета настроено на идеальное окно просмотра.
3. px и адаптивный
Выше мы узнали, что когда область просмотра макета устанавливается как идеальная область просмотра с помощью метатега области просмотра, 1 пиксель CSS может быть выражен как:
1 CSS像素 = 物理像素／分辨率
Идём пока вьюпорт макета на стороне пк обычно 980px, а мобильная сторона берёт для примера iphone6, разрешение 375*667, значит вьюпорт макета в идеале 375px. Например, теперь у нас есть мокап 750px * 1134px, тогда на стороне ПК пиксель css можно рассчитать следующим образом:
PC端： 1 CSS像素 = 物理像素／分辨率 = 750 ／ 980 =0.76 px
И под айфон6:
iphone6：1 CSS像素 = 物理像素 ／分辨率 = 750 ／ 375 = 2 px
То есть на стороне ПК один пиксель CSS может быть представлен 0,76 физическими пикселями, в то время как один пиксель CSS в iphone6 представляет 2 физических пикселя. Кроме того, разные мобильные устройства имеют разное разрешение, то есть физические пиксели, которые могут быть представлены одним пикселем CSS, различны, поэтому, если в качестве единицы длины и ширины в CSS используется только px, в результате он не может быть достигнуто с помощью набора стилей, адаптивных на каждом конце.
2. Запросы СМИ
Как мы упоминали ранее, под разными устройствами в файле CSS размер физического пикселя, представленного 1px, разный, поэтому через набор стилей невозможно добиться самоадаптации на каждом конце. Отсюда связываем:
Если одного набора стилей недостаточно, можно ли дать каждому устройству свой набор стилей для достижения адаптивного эффекта?
Ответ положительный.
Используя медиа-запросы @media, вы можете определить разные стили для разных типов мультимедиа, особенно для адаптивных страниц.Вы можете написать несколько наборов стилей для разных размеров экрана для достижения адаптивных эффектов. Например:
@media screen and (max-width: 960px){
body{
background-color:#FF6699
}
}
@media screen and (max-width: 768px){
body{
background-color:#00FF66;
}
}
@media screen and (max-width: 550px){
body{
background-color:#6633FF;
}
}
@media screen and (max-width: 320px){
body{
background-color:#FFFF00;
}
}
Вышеприведенный код определяет несколько наборов стилей с помощью медиа-запросов и устанавливает максимальное разрешение, когда стиль вступает в силу через max-width.Приведенные выше коды используются для экранов с разрешением 0～320px, 320px～550px, 550px～768px и 768px. ～960px соответственно.Заданы разные цвета фона.
С помощью медиазапросов можно добиться адаптивных макетов, написав разные стили для устройств с разным разрешением.Например, мы устанавливаем разные фоновые изображения для экранов с разным разрешением. Например, установку изображений @2x для мобильных телефонов с маленьким экраном и изображений @3x для телефонов с большим экраном можно легко реализовать с помощью медиа-запросов.
Однако очевидны и недостатки медиа-запросов: если при изменении размера браузера нужно менять слишком много стилей, такое большое количество наборов кодов стилей будет громоздким.
3. Процент
В дополнение к использованию px в сочетании с медиа-запросами для достижения адаптивного макета, мы также можем использовать процентную единицу «%» для достижения адаптивных эффектов.
Например, при изменении ширины или высоты браузера можно использовать процентную единицу, чтобы ширина и высота компонентов в браузере изменялись вместе с изменением браузера, чтобы добиться эффекта отклика.
Чтобы понять процентное расположение, первое, что нужно понять, это:
Кто именно процент (%) в дочернем элементе в CSS?
Интуитивно мы можем подумать, что процент дочерних элементов полностью зависит от непосредственного родительского элемента, процент высоты относится к высоте, а процент ширины относится к ширине. Конечно, это понимание правильное, но согласно блочной модели CSS, помимо свойств высоты и ширины, у него есть еще такие свойства, как отступы, границы, поля и так далее. Таким образом, эти атрибуты устанавливаются в процентах в соответствии с этими атрибутами родительского элемента? Кроме того, в таких свойствах, как border-radius и translate, есть проценты. Далее следует подробный анализ.
1. Конкретный анализ процентов
(1) Процент высоты и ширины дочерних элементов
Процент, используемый в высоте или ширине дочернего элемента, относится к непосредственному родительскому элементу дочернего элемента, ширина относится к ширине родительского элемента, а высота относится к высоте родительского элемента. Например:
<div class="parent">
<div class="child"></div>
</div>
Если установлено:
.отец{
ширина: 200 пикселей;
высота: 100 пикселей;
}
.ребенок{
ширина: 50%;
высота: 50%;
}
Отображаемый эффект:
(2) сверху и снизу, слева и справа
Если верх и низ дочернего элемента заданы в процентах, они относятся к высоте родительского элемента, который имеет прямое нестатическое позиционирование (позиционирование по умолчанию) и то же самое.
Левые и правые подэлементы, если установите процент, по отношению к ширине прямого нестатического позиционирования (позиционирование по умолчанию) родительского элемента.
Отображаемый эффект:
(3) прокладка
Если отступ дочернего элемента установлен в процентах, будь то вертикальный или горизонтальный, он относится к ширине непосредственного родительского элемента и не имеет ничего общего с высотой родительского элемента.
Например:
.parent{
width:200px;
height:100px;
background:green;
}
.child{
width:0px;
height:0px;
background:blue;
color:white;
padding-top:50%;
padding-left:50%;
}
Отображаемый эффект:
Начальная ширина и высота дочернего элемента равны 0. Родительский элемент может быть увеличен за счет отступов.Синяя часть изображения выше представляет собой квадрат, а длина стороны составляет 100 пикселей по ширине.
(4) маржа
Как и заполнение, так и поле.Если поле дочернего элемента установлено в процентах, будь оно вертикальным или горизонтальным, оно относится к ширине непосредственного родительского элемента. Здесь нет конкретных примеров.
(5) радиус границы
Граница-радиус отличается. Если граница-радиус установлена в процентах, это относится к его собственной ширине. Например:
<div class="trangle"></div>
Установите радиус границы в процентах:
.trangle{
width:100px;
height:100px;
border-radius:50%;
background:blue;
margin-top:10px;
}
Эффект отображения:
В дополнение к радиусу границы другие вещи, такие как перевод, размер фона и т. д., являются относительными, поэтому я не буду приводить здесь пример.
2. Приложение для макета в процентах
Процентные единицы широко используются в верстке, вот приложение.
Например, если мы хотим реализовать прямоугольник с фиксированным соотношением сторон, например, если мы хотим реализовать прямоугольник с соотношением сторон 4:3, мы можем реализовать его в соответствии с атрибутом padding, потому что независимо от того, является ли padding по вертикали или по горизонтали, процентная единица относится к родительской ширине элемента, поэтому мы можем установить padding-top в процентах, чтобы получить прямоугольник с адаптивной длиной и шириной:
<div class="trangle"></div>
Установите стиль, чтобы сделать его адаптивным:
.trangle{
height:0;
width:100%;
padding-top:75%;
}
При установке padding-top: 75% относительная ширина составляет 75%, поэтому устанавливается прямоугольник с постоянным соотношением длины, ширины и высоты Конкретный эффект показан следующим образом:
3. Недостатки процентных единиц
Из приведенного выше введения в процентную единицу мы можем легко увидеть, что если все процентные единицы используются для реализации адаптивного макета, есть два очевидных недостатка:
(1) Трудно рассчитать.Если мы хотим определить ширину и высоту элемента, в соответствии с эскизом проекта, они должны быть преобразованы в процентную единицу. (2) Как видно из раздела 1, если проценты используются в каждом атрибуте, атрибуты, относящиеся к родительскому элементу, не уникальны. Например, ширина и высота относятся к ширине и высоте родительского элемента, в то время как поля и отступы относятся к ширине родительского элемента как в вертикальном, так и в горизонтальном направлениях, а радиус границы относится к самому элементу и т. д. ., что позволяет нам легко использовать процентные единицы для создания макета Проблема усложняется.
В-четвертых, решение rem в адаптивных сценариях
1. бэр единица
Прежде всего, что такое рем единица. Бэр — это гибкая расширяемая единица измерения, которая преобразуется в пиксели и отображается браузером. В отличие от единиц em, единицы rem относятся только к размеру шрифта браузера корневого элемента (элемента HTML), независимо от уровня вложенности. По умолчанию размер шрифта html-элементов равен 16px, поэтому:
1 rem = 12px
Для удобства расчета обычно можно установить размер шрифта html равным:
html{ font-size: 62.5% }
В этой ситуации:
1 rem = 10px
2. Реализуйте адаптивную верстку через rem
Устройство REM определяет размер корневого элемента HTML, а размер шрифта корневого элемента эквивалентен для обеспечения базовой линии. Когда размер страницы изменяется, требуется только значение размера шрифта, затем размер Элементы REMS также будут реагировать изменения. Следовательно, если макет отклика реализуется 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);
В приведенном выше коде контейнер представления разделен на 10 частей, а размер шрифта представлен одной десятой ширины Наконец, выполняя этот код в теге заголовка, размер шрифта может быть динамически определено, так что 1rem можно использовать в разных визуальных элементах.В контейнере представлены разные размеры, а фиксированная единица rem может реализовывать адаптацию макета в разных контейнерах.
3. rem2px и px2rem
Если единица rem используется в адаптивном макете, возникает проблема преобразования единиц измерения. rem2px означает преобразование из rem в px. Об этом нельзя говорить. Пока rem умножается на размер в соответствующем font-size, его можно преобразовать в px . Еще приложения px2rem, что означает преобразование из px в rem.
Например, данный визуальный набросок составляет 750 пикселей (физических пикселей).Если мы хотим использовать rem для представления всех единиц макета, относительно глупый способ — умножить все элементы, такие как высота и ширина, на соответствующее соотношение, а теперь преобразовать визуальный преобразовать в rem единицы, а затем использовать rem для представления каждой из них. Другое удобное решение заключается в том, что в CSS мы по-прежнему используем px для представления размера элемента.После написания кода CSS преобразуйте все единицы px в файле CSS в единицы rem.
Принцип px2rem также очень прост: основное внимание уделяется предварительной обработке файлов CSS в единицах px и преобразованию всех px в единицы rem после обработки. Этого можно достичь двумя способами:
1) Форма загрузчика webpack:
npm install px2rem-loader
В файле конфигурации веб-пакета:
module.exports = {
// ...
module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'px2rem-loader',
// options here
options: {
remUni: 75,
remPrecision: 8
}
}]
}]
}
}
2) webpack использовал плагин postcss
npm install postcss-loader
В плагине веб-пакета:
var px2rem = require('postcss-px2rem');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function() {
return [px2rem({remUnit: 75})];
}
}
4. Пример применения rem layout
Мобильная страница NetEase News использует макет rem. Конкретные примеры приведены ниже:
5. Недостатки rem-макета
С помощью модуля rem можно добиться адаптивного макета, особенно путем введения соответствующих плагинов, связанных с postcss, что устраняет необходимость вычисления px для rem в черновике дизайна. Единица rem также используется на некоторых зарубежных веб-сайтах Недостатками rem для достижения макета или небольшими дефектами являются:
В адаптивном макете размер шрифта корневого элемента должен динамически контролироваться через js.
То есть стиль css и код js имеют определенную связь. И код, который меняет размер шрифта, должен быть размещен перед стилем css.
5. Адаптивный через vw/vh
1. Что такое vw/vh?
CSS3 вводит новую единицу измерения vw/vh, связанную с окном просмотра. vw представляет ширину относительно окна просмотра, а vh представляет высоту относительно окна просмотра. В дополнение к vw и vh есть также два связанных единицы, vmin и vmax. Конкретное значение каждой единицы заключается в следующем:
| единица измерения | имея в виду |
|---|---|
| vw | Ширина области просмотра составляет 100vw относительно ширины области просмотра. |
| vh | Относительно высоты области просмотра высота области просмотра составляет 100vh. |
| vmin | меньшее значение в vw и vh |
| vmax | Большее значение vw и vh |
Здесь мы обнаруживаем, что ширина и высота окна равны 100vw/100vh, тогда vw или vh, далее vw, очень похоже на процентную единицу. Разница между vw и %:
| единица измерения | имея в виду |
|---|---|
| % | Большинство из них относятся к элементам-предкам, но также и к самим себе (граница-радиус, перевод и т. д.). |
| vw/vh | Размер относительно области просмотра |
Мы можем видеть из сравнения, аналогичная процентная единица VW, единственное отличие в действительности, мы представили вышеупомянутые трудности с точки зрения процентных единиц, где как VW «идеальные процентные единицы». Для любого элемента уровня, в случае единиц vw, 1vw равно 1% ширины представления.
2. преобразование единиц измерения VW
Точно так же, если вы хотите преобразовать px в единицу vw, это очень просто, просто определите размер окна (область просмотра макета) представления, если мы установим область просмотра макета на размер разрешения, например, для iphone6/7 375 * 667 разрешение , то px можно преобразовать в vw следующим образом:
1px = （1/375）*100 vw
Кроме того, вы также можете предварительно обработать CSS для автоматического преобразования с помощью соответствующего плагина postcss,postcss-px-to-viewportМожет автоматически конвертировать px в vw. Параметры по умолчанию для postcss-px-to-viewport:
var defaults = {
viewportWidth: 320,
viewportHeight: 568,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
};
Указав ширину и высоту области просмотра, а также точность преобразования, вы можете преобразовать px в vw.
3. Совместимость блоков vw/vh
Вы можете проверить поддержку единиц vw для каждой версии браузера на https://caniuse.com/.
На приведенном выше рисунке мы обнаружили, что большинство браузеров поддерживают единицы vw, но ie9-11 не поддерживает vmin и vmax.Учитывая, что единицы vmin и vmax обычно не используются, единицы vw очень поддерживаются в большинстве высокопроизводительных браузеров.Хорошо, но браузер Opera не поддерживает блок vw в целом, если вам нужна совместимость с макетом браузера Opera, vw не рекомендуется.
Резюме: В этой статье представлены единицы измерения, обычно используемые в макете, такие как px, %, rem и vw и т. д., а также преимущества и недостатки различных единиц измерения в адаптивном макете.