Управляемое чтение
Проблема адаптации часто встречается при фронтенд-разработке, и проблем может быть много, например:
-
1pxвопрос -
UIФигура идеально подходит -
iPhoneСхема адаптации - Горизонтальная экранная адаптация
- Проблема с размытием изображения на HD-экране
- ...
Некоторые из вышеперечисленных задач, возможно, уже знают, как их решать, но принцип задачи и принцип решения могут быть неясны или непонятны. В процессе изучения этих проблем мы столкнемся со многими понятиями, такими как: пиксель, разрешение, PPI, DPI, DP, DPR, вьюпорт и т. д. Эти понятия часто неясны.
Эта статья стремится решать вышеуказанные проблемы.
1 дюйм
В жизни мы часто говорим, сколько дюймов в мобильных телефонах и мониторах.寸то есть英寸, например: Мой мобильный телефон имеет экран 6,5 дюймов, это означает, что длина диагонали экрана мобильного телефона составляет 6,5 дюймов.
дюйм(inch,сокращенноin) по-голландски означает большой палец, а дюйм - это ширина большого пальца среднего человека в нижней части ногтя, кэш для дюймов и сантиметров составляет:1英寸 = 2.54厘米.
2 Разрешение
Обычно мы говорим о двух разрешениях, одно — разрешение экрана, другое — разрешение изображения; давайте посмотрим, прежде чем говорить о разрешении.像素
2,1 пикселя
Пиксель можно понимать как небольшой квадрат с определенным положением и цветом.
Картинки и электронные экраны, которые мы обычно видим (дисплеи мобильных телефонов, компьютеров и телевизоров), состоят из множества блоков пикселей с определенными цветами и позициями; пиксель является их наименьшей единицей.
Вы можете открыть изображение через эскиз, а затем увеличить изображение, вы можете увидеть эти пиксели
2.2 Разрешение экрана
Разрешение экрана – это количество пикселей, из которых состоит экран. Мы часто настраиваем разрешение мониторов наших компьютеров, например,
Это интерфейс для windows для установки разрешения экрана, рекомендуется 1366*768, это число обозначает количество пикселей по горизонтали и вертикали.
Конечно, следует отметить, что分辨率Высокий уровень не означает, что экран четкий, а четкость экрана остается такой же, как尺寸Связанный.
2.3 Разрешение изображения
обычно говорят图片分辨率Относится к количеству пикселей в изображении, например, разрешение изображения800 * 400, где 800 означает 800 пикселей по горизонтали, а 400 — 400 пикселей по вертикали.
同一尺寸картинка, экран, чем выше разрешение, тем четче
2.4 PPI
PPI (Pixel Per Inch), который представляет количество пикселей на дюйм.
просто сказал,同一尺寸的屏幕、图片，分辨率越高就越清晰,фактическиPPIМожет также использоваться для описания резкости (качества) экранов и изображений, поскольку同一尺寸Описывает количество пикселей при предварительном условии .
PPIФормула расчета:
2.4 DPI
DPI (Dot Per Inch), что означает количество точек на дюйм, это абстрактная единица, это может быть точка пикселя при описании экрана или изображения, или точка чернил принтера.
когдаDPIКогда используется для описания изображений и экранов,DPIа такжеPPIэквивалентны, но на самом деле чаще всего он используется для описания принтера, указывающего количество точек, которое принтер может напечатать на дюйм.
Когда принтер печатает лист, если DPI выше, это означает, что плотность печатаемых точек больше, качество напечатанного изображения лучше, и, конечно, это будет потреблять больше чернильных точек и времени печати.
3 независимых от устройства пикселя
На самом деле пиксели, о которых мы упоминали выше, относятся к物理像素, то есть фактический физический блок на устройстве.
Давайте взглянем设备独立像素 (Device Indpendent Pixels, DIP or DP)как он производится.
Смартфоны развиваются быстрее, чем мы можем себе представить. В прошлом мы начинали с телефонов с очень низким разрешением, таких как белый телефон ниже, который имел разрешение320 * 480, мы можем просматривать на нем обычный текст, картинки и т.д.
Однако с развитием технологий вскоре мобильные телефоны с низким разрешением уже не могут удовлетворять наши потребности. Позже и вскоре появились мобильные телефоны с высоким разрешением, такие как черный мобильный телефон ниже, который имеет разрешение640 * 940, что ровно в два раза превышает разрешение белого телефона.
По идее, картинки и текст одинакового размера и разрешения (одинакового DPI) должны дублироваться на черном телефоне, потому что его разрешение удваивается, так что это не так, более высокое разрешение появится позже Станут ли элементы страницы меньше и меньше?
Однако это не так, независимо от того, насколько высокое разрешение, доля отображаемого контента в основном одинакова. ДжобсiPhone4впервые представлен на пресс-конференцииRetina Display (视网膜屏幕)Концепция решает вышеуказанные проблемы, что также делает его мобильным телефоном разных поколений.
существуетiPhone4Используя экран Retina, поместите2 * 2пикселей, когда1используются пиксели, что делает экран более изысканным, но размер элементов не меняется.
Если черный телефон, о котором мы упоминали выше, используется视网膜屏幕Техника, то результат является следующим, таким как ширина списка300пикселей, то в горизонтальном направлении белый телефон будет использовать300физические пиксели для его рендеринга, а черный телефон на самом деле использовал бы600рендеринг физических пикселей.
В это время возникает вопрос, как развиваются разработчики? Как унифицировать экраны с разным разрешением?
Необходимо использовать единый блок, чтобы сообщать разработчикам и устройствам с разным разрешением размер элементов, отображаемых в интерфейсе.设备独立像素 (Device Independent Pixels), именуемыйDIPилиDP. Выше мы сказали, что ширина списка равна300пикселей, на самом деле мы можем сказать, что ширина списка300независимые от устройства пиксели.
ОткрытьchromeИнструмент разработчика, мы можем имитировать удачную ситуацию с отображением каждого мобильного телефона, каждая модель будет отображать размер, напримерiPhone XРазмер дисплея375 * 812, по фактуiPhone XРазрешение намного выше этого, и то, что здесь показано, — это независимые от устройства пиксели.
Когда мы обычно разрабатываем, пиксели, которые мы пишем, на самом деле设备独立像素, чтобы было единое целое между разработчиками и устройствами разного разрешения.
3.1 Соотношение пикселей устройства
соотношение пикселей устройстваDevice Pixel Ratioкороткое имяDPR,Прямо сейчас物理像素 / 设备独立像素ценность .
В браузере можноwindow.devicePixelRatioполучитьDPR.
В CSS вы можете использовать медиа-запросыmin-device-pixel-ratio, получитьDPR.
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {}
существуетReact NativeВы можете пройтиPixelRatio.get()получитьDPR.
Конечно, есть исключения из вышеперечисленных правил, например,iPhone 6、7、8 PlusФактические физические пиксели1080 * 1920, в инструментах разработчика мы видим, что его независимый от устройства пиксель414 * 736, соотношение пикселей устройства (DPR) составляет3, Независимые от оборудования пиксели и пиксели оборудования не равны1080 * 1920, но1242 * 2208.
На самом деле, телефон автоматически1242 * 2208пикселей в1080 * 1920физические пиксели для рендеринга, нам не нужно заботиться об этом процессе, и1242 * 2208Его называют пикселем дизайна экрана, который задается в прототипе пользовательского интерфейса.像素, конечно, мы также используем это в процессе разработки设计像素преобладать.
Он появился только после того, как Apple предложила экран Retina.设备像素比(DIP)Эта концепция, потому что раньше мобильные устройства напрямую отображались с использованием физических пикселей.
Незамедлительно после,AndroidДругие методы также используются для достиженияDPRбольше, чем1экран, но принцип тот же. Потому что Android имеет множество размеров экрана и широкий диапазон разрешений, в отличие от Apple, у которой есть только несколько фиксированных устройств и собственных размеров. Поэтому, чтобы обеспечить эффект отображения различных устройств, Android-устройство делит устройство на несколько интервалов в соответствии с плотностью пикселей устройства:
Конечно, все устройства Android не могут строго следовать вышеуказанным разрешениям, и каждый тип может соответствовать нескольким различным разрешениям, поэтому каждый телефон Android может определять свой собственный DPR в соответствии с заданным диапазоном, чтобы иметь одинаковый дисплей. Конечно, это просто похоже.Из-за различий в размере и разрешении каждого устройства аппаратно-независимые пиксели не будут точно такими же, поэтому отображение на различных устройствах Android все еще не может быть полностью согласованным.
3.2 Разработка мобильного терминала
существуетIOS,Android,React NativeПри разработке в единицах стиля используются аппаратно-независимые пиксели.
IOSЕдиницей размера являетсяpt,AndroidЕдиницей размера являетсяdp,React NativeВ , не указана явная единица измерения, на самом деле это независимые от устройства пиксели.dp.
В использованииReact NativeразвиватьAPPчас,UIПредоставленные нам схемы прототипов обычно основаны наiPhone 6дается в физических пикселях.
Чтобы адаптироваться ко всем моделям, нам нужно преобразовать физические пиксели в независимые от устройства пиксели при написании стилей, например: если высота данного элемента равна200px(это физические пиксели, а не пиксели CSS),iPhone 6Соотношение пикселей устройства (DPR) составляет2, когда мы разрабатываемheightДолжно быть200px / 2 = 100dp.
Конечно, лучше всего хорошо общаться с дизайном, всеUIРисунки создаются в аппаратно-независимых пикселях.
Мы также можем преобразовать px и dp в код (React Native):
import {PixelRatio } from 'react-native';
const dpr = PixelRatio.get();
/**
* px转换为dp
*/
export function pxConvertTodp(px) {
return px / dpr;
}
/**
* dp转换为px
*/
export function dpConvertTopx(dp) {
return PixelRatio.getPixelSizeForLayoutSize(dp);
}
3.3 Разработка веб-терминала
пишуCSS, единицей, которую мы используем чаще всего, являетсяpx,Прямо сейчасCSS 像素, когда коэффициент масштабирования страницы100%когдаCSS 像素Равен одному независимому от устройства пикселю. Смысл этого предложения в том, что мы можем непосредственно следоватьUIРисунок заданных пикселей для разработки.
ноCSS 像素легко меняется, когда пользователь увеличивает масштаб браузера,CSS 像素будет увеличиваться, что являетсяCSS 像素В доменах будет больше физических пикселей, и вы обнаружите, что текст становится больше и четче.
页面的缩放系数 = CSS 像素 / 设备独立像素
3.4 Об экране
Еще два слова здесьRetinaскрин, как я видел во многих статьях правильныйRetinaЭкран неправильно понял.
Экран Retina — это просто маркетинговый термин, который придумала Apple:
На обычных расстояниях человеческий глаз не может различить отдельные пиксели.
почему стресс普通的使用距离下Шерстяная ткань? Давайте посмотрим на формулу его расчета:
aрепрезентативная точка зрения,hпредставляет расстояние между пикселями,dПредставляет собой расстояние между невооруженным глазом и экраном. Экран, отвечающий вышеуказанным условиям, может сделать один физический пиксель невидимым для невооруженного глаза.
Он не может просто выразить резолюцию иPPI (Pixel Per Inch), может выражать только один визуальный эффект.
Наличие нескольких физических пикселей, отображающих один пиксель, простоRetianПрием, используемый экраном для достижения эффекта, не всеDPR > 1экранRetinaЭкран.
Например: дать вам экран большого размера, даже если егоPPIочень высоко,DPR (Device Pixel Ratio)Он тоже высокий, но с близкого расстояния четко видны его пиксели, это неRetinaЭкран.
мы часто видимKа такжеPЭти две единицы используются для описания экрана:
PПредставляет количество пикселей в вертикальном направлении экрана,1080Pто есть вертикальный1080пикселей, разрешение1920 * 1080экран принадлежит1080 PЭкран.
То, что мы обычно называем экраном высокой четкости, на самом деле означает, что физическое разрешение экрана достигает или превышает1920 * 1080экран.
KОт имени экрана по горизонтали есть несколько1024пиксели, как правило, количество горизонтальных пикселей превышает2048принадлежать2 Kэкрана, горизонтальные пиксели превышают4096что касается терминологии4 KЭкран.
Вышеприведенный контент взят изЧто нужно знать о мобильной адаптации+ некоторое собственное понимание
4 окна просмотра
Область просмотра(viewport)Относится к окну браузера, то есть к части браузера, используемой для отображения веб-страницы, за исключением пользовательского интерфейса браузера, строки меню и т. д. — это видимая область веб-страницы пользователя, то есть часть документа, который вы просматриваете. можно понять для размещенияhtmlКонтейнер для элементов.
Окно просмотра отличается на мобильном телефоне и ПК. Область просмотра на стороне ПК — это область окна браузера, а на стороне мобильных устройств есть три разных концепции области просмотра:布局视口,视觉视口,理想视口.
viewportНастройки не повлияют на страницу ПК, но важны для мобильной страницы.
4.1 окно просмотра макета
Базовое окно макета веб-страницы в браузерах ПК эквивалентно размеру окна текущего браузера (за исключением границ, полей и полос прокрутки).Это значение также может динамически изменяться в зависимости от размера окна. На мобильной стороне области просмотра макета присваивается значение по умолчанию, большая часть которого составляет 980 пикселей, что гарантирует, что веб-страница ПК может отображаться в браузере мобильного телефона, но содержимое веб-страницы станет меньше, и пользователь может вручную увеличить веб-страницу, конечно же, при увеличении масштаба. Браузер также имеет полосы прокрутки. в состоянии пройтиdocument.documentElement.clientWidth / clientHeightПолучает размер области просмотра макета веб-страницы в стандартном режиме, и это значение неизменяемо.
4.2 визуальное окно просмотра
Часть экрана, которую пользователь может видеть на мобильном устройстве. в состоянии пройтиwindow.innerWidth / innerHeightчтобы получить размер визуального окна просмотра. Визуальное окно можно изменить как на стороне ПК, так и на стороне мобильного устройства.При изменении размера окна на стороне ПК изменяется размер визуального окна просмотра; на мобильной стороне, например, когда появляется клавиатура, визуальное область просмотра станет меньше.
4.3 идеальное окно просмотра (идеальное окно)
Идеальный размер страниц веб-сайта для отображения на мобильных устройствах. Ширина страницы такая же, как и ширина устройства, как описано выше.CSS 像素упомянул页面的缩放系数 = CSS像素 / 设备独立像素, на самом деле говоря页面的缩放系数 = 理想视口宽度 / 视觉视口宽度является более точным, поэтому, когда страница увеличена до 100 %,CSS像素 = 设备独立像素,布局视口 = 视觉视口 = 理想视口, мы видим на экране нормальную и удобную страницу, доступ к которой возможен черезscreen.width / heightчтобы получить идеальный размер области просмотра.
4.4 Meta Viewport
4.4.1 Введение в атрибут
| Атрибуты | имея в виду | стоимость |
|---|---|---|
| width | Определяет ширину области просмотра в пикселях. | Ширина устройства или положительное целое число |
| height | Определяет высоту области просмотра в пикселях. | положительное целое число или высота устройства |
| initial-scale | Определите начальное значение масштабирования | Целое или десятичное |
| minimum-scale | Определяет минимальный масштаб для уменьшения, он должен быть меньше или равен настройке максимального масштаба. | Целое или десятичное |
| maximum-scale | Определяет максимальный масштаб масштабирования, он должен быть больше или равен настройке минимального масштаба. | Целое или десятичное |
| user-scalable | Определяет, разрешать ли пользователю вручную масштабировать страницу, значение по умолчанию — «да». | yes/no |
4.4.2 Основное использование и функции
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
Базовая установка выше:
-
width = device-width: значит пусть布局视口равна ширине устройства -
initial-scale = 1: Указывает, что начальный коэффициент масштабирования страницы равен 1, что эквивалентно разрешению视觉视口 = 理想视口, 1 пиксель CSS равен 1 независимому от устройства пикселю. -
maximum-scale = 1.0: Максимальный коэффициент масштабирования указывает на страницу 1. -
user-scalable = no: указывает, что пользователю не разрешено масштабировать страницу.
viewportРоль атрибутов состоит в том, чтобы позволить布局视口Масштабирование по ширине экрана,widht = device-widthпросто позволь布局视口Начальный размер равен ширине устройства, устанавливается позжеinitial-scaleдля масштабирования布局视口размер, а значение по умолчанию布局视口Начальный размер равен ширине устройства, т. н.理想窗口.
Вышеприведенный контент взят изУ меня есть проект дизайна, как мне разработать мобильный терминал?+ некоторое собственное понимание
4.5 Начальное масштабирование
упомянутый вышеmetaна этикеткеwidthМожно определить ширину окна просмотра макета, на самом деле это не единственный решающий фактор для окна просмотра макета, установитеinitial-scaleЭто также может повлиять на окно просмотра макета, поскольку ширина окна просмотра макета занимаетwidthа также视觉视口максимальная ширина.
Например: если идеальная ширина области просмотра мобильного телефона400px,настраиватьwidth = device-width,initial-scale = 2,В настоящее время视觉视口宽度 = 理想视口宽度 / initial-scaleкоторый200px, окно просмотра макета принимает максимальное значение из двух, а именноdevice-width 400px, на самом деле, когда начальный масштаб больше 1, вьюпорт макета равен размеру идеального вьюпорта, то есть начальный размер страницы всегда равен размеру идеального вьюпорта.
Если установленоwidth=device-width,initial-scale=0.5,В настоящее время视觉视口宽度 = 理想视口宽度 / initial-scaleкоторый800px, окно просмотра макета принимает максимальное значение из двух, а именно800px, вы обнаружите, что на странице появляется полоса прокрутки, потому что теперь布局视口 > 理想窗口
Я вот одного не понимаю, почему текст стал еще и крупнее??
личное понимание
Окно просмотра макета становится больше, а пиксель CSS будет отображаться в нескольких физических пикселях, поэтому текст станет больше.
4.6 Получить размер браузера
Браузер предоставляет нам способ получить размер окнаAPIМного:
-
window.innerHeight: Получить визуальную высоту окна просмотра браузера (включая вертикальную полосу прокрутки). -
window.outerHeight: получить высоту за пределами окна браузера, это значение фиксировано,设备的分辨率 / 设备像素比 -
window.screen.availHeight: доступная высота окна браузера -
document.documentElement.clientHeight: получить высоту области просмотра макета браузера, включая отступы, но исключая вертикальные полосы прокрутки, границы и поля. -
document.documentElement.offsetHeight: включает отступы, полосы прокрутки, границы и поля -
document.documentElement.scrollHeight: минимальная ширина для размещения всего в окне просмотра без использования полос прокрутки. измерения иclientHeightТо же самое, он включает отступ элемента, но не границы, поля или вертикальные полосы прокрутки.
5 1px проблема
Чтобы адаптироваться к различным экранам, мы обычно используем аппаратно-независимые пиксели для компоновки и разработки страниц при написании кода.
в то время как отношение пикселей, независимое от устройства, больше, чем1экран, мы пишем1pxна самом деле визуализируется несколькими физическими пикселями, это будет выглядеть1pxНа некоторых экранах выглядит толстым.
5.1 border-image
на основеmediaЗапрос для определения различных соотношений пикселей устройства с учетом разныхborder-image:
.border__1px {
border-bottom: 1px solid #000;
}
@media only screen and (-webkit-min-device-pixel-ratio:2) {
.border__1px {
border-bottom: none;
border-width: 0 0 1px 0;
border-image: url(../img/1pxline.png) 0 0 2 0 stretch;
}
}
5.2 background-image
а такжеborder-imageТочно так же подготовьте квалифицированное фоновое изображение границы для имитации фона:
.border__1px {
border-bottom: 1px solid #000;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.border__1px {
background: url(../img/1pxline.png) repeat-x left bottom;
background-size: 100% 1px;
}
}
Оба вышеперечисленных изображения нужно подготавливать отдельно, а с закругленными углами не очень легко обращаться, но они справятся с большинством сценариев.
5.3 Псевдокласс + преобразование
на основеmediaЗапрос для определения соотношения пикселей разных устройств для масштабирования линии:
.border__1px:before {
content: '';
position: absolute;
top: 0;
height: 1px;
width: 100%
background-color: #000;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2) {
.border__1px:before {
transform: scaleY(0.5)
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3) {
.border__1px:before {
transform: scaleY(0.33)
}
}
Этот метод может встречать различные сценарии, если вам нужны закругленные углы, вам нужно только добавить псевдоклассы.border-radiusВот и все.
5.4 svg
выше мы проходимborder-imageа такжеbackground-imageможно смоделировать1pxГраницы, но все они используют растровые изображения и должны импортироваться извне.
с помощьюPostCssизpostcss-write-svgмы можем напрямую использоватьborder-imageа такжеbackground-imageСоздайтеsvgиз1pxРамка:
@svg border__1px {
height: 2px;
@rect {
fill: var(--color, black);
width: 100%;
height: 50%;
}
}
.example {
border: 1px solid transparent;
border-image: svg(border__1px param(--color #00b1ff)) 2 2 stretch;
}
После компиляции:
.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch; }
5.5 Настройка области просмотра
трепать установить масштаб, чтобы позволитьCSSПиксели равны настоящим физическим пикселям.
Например: когда соотношение пикселей устройства равно 3, мы масштабируем страницу с коэффициентом 1/3, то есть 1 пиксель равен 1 физическому пикселю.
const scale = 1 / window.devicePixelRatio
const viewport = document.querySelector('meta[name="viewport"]')
if (!viewport) {
viewport = document.createElement('meta')
viewport.setAttribute('name', 'viewport')
window.document.head.appendChild(viewport)
}
viewport.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale)
На самом деле вышеприведенная схема является более раннейflexibleсхема принята.
Конечно, за это приходится платить, а это означает, что все макеты на вашей странице должны быть написаны в физических пикселях, а это означает, что ваша страница может иметь лучший пользовательский интерфейс только на фиксированных устройствах, что, очевидно, невозможно. . В это время мы можем использоватьflexibleилиvw、vhчтобы помочь нам адаптироваться.
6 адаптивных макетов
Хотя мы можем использовать设备独立像素Чтобы эффект страницы, отображаемой на каждом устройстве, был одинаковым, но это не гарантирует полной согласованности отображения, нам нужно решение, позволяющее сделать проект дизайна более совершенным.
6.1 рем макет
flexibleРешение представляет собой решение для адаптации мобильного терминала, исходный код которого был открыт Alibaba ранее.flexibleПосле этого используем единообразно на страницеremПриходите к макету
6.1.1 гибкий сценарий 1
Его основной код очень прост:
// set 1rem = viewWidth / 10
function setRemUnit () {
var docEl = document.documentElement
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
remотносительноhtmlузлаfont-sizeсделать расчет.
Мы устанавливаемdocument.documentElement.style.fontSizeОн может унифицировать стандарт макета всей страницы.
В приведенном выше кодеhtmlузелfont-sizeустановить как страницуclientWidth(Вьюпорт макета)1/10,Прямо сейчас1remэквивалентно области просмотра макета страницы1/10, что означает, что мы позже используемremВсе рассчитываются в соответствии с соотношением страниц.
В этот момент нам нужно толькоUIВыходной график преобразуется вremВот и все.
кiPhone 6Например, окно просмотра макета375px,но1rem = 37.5px,ЭтоUIШирина данного элемента75px(независимые от устройства пиксели), нам просто нужно установить его на75 / 37.5 = 2rem.
Конечно, вычислять каждый макет очень громоздко, мы можем использоватьPostCSSизpx2remплагины, которые помогут нам завершить этот процесс.
Следующий код может гарантировать, что при изменении размера страницы макет может быть адаптивным, когда стартwindowизresizeа такжеpageShowАвтоматическая корректировка после событияhtmlизfontSizeразмер.
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageShow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
6.1.2 гибкий вариант 2
Приведенная выше схема 1 является более общей схемой, но ее необходимо настроитьPostCSSизpx2remПлагин помогает нам завершить автоматический расчет и преобразование px -> rem, но иногда мы можем столкнуться с ситуациями, когда плагин не нужен, не нужен или не может быть использован.Например, я столкнулся с такой ситуацией сейчас. проект, нужна только одна страница响应式Поэтому мы не можем настроить такой плагин для всего проекта, для этого можно использовать следующую схему.方便计算
function setRemUnit () {
var docEl = document.documentElement
// 假设我的设计图的独立设备像素为 375 px
var rem = docEl / 3.75
// 1rem = 100px
docEl.style.fontSize = rem + 'px'
}
На самом деле план основан на1rem = 100pxЭто соотношение разработано для облегчения расчета, такого как
Мое изображение дизайна составляет 375 пикселей независимых пикселей устройства, и теперь есть div размером 75 пикселей, тогда код размера div при разработкеwidth = 0.75rem, что очень удобно вычислять
6.1.3 гибкий вариант 3
Вышеуказанная схема была разработана с использованием удобного расчета 1: 100. На самом деле есть более удобный способ, который заключается в разработке по соотношению 1: 1.1rem = 1px
Этот способ тоже упоминался в интернете, но его все опровергали, говоря, что в браузере (хроме) установлен минимальный шрифт12pxПредел, если выhtmlизfont-size = 1px, минимальный размер шрифта, установленный текущим браузером, составляет 12 пикселей, поэтому браузер автоматически распознает html{font-size: 1px} как html{font-size: 12px}, поэтому эффект равен 1rem = 12px.
Я пошел экспериментировать, и с этой настройкой проблем нет. Вы обнаружите, что установленный вами rem по-прежнему реагирует и размер правильный. Конечно, также возможно, что в предыдущем браузере была эта проблема, но это ушел сейчас.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 1px;
}
.test {
padding: 1rem;
background: blue;
margin: 1rem;
width: 5rem;
height: 5rem;
}
.text1 {
font-size: 5rem;
}
.text2 {
font-size: 12rem;
}
</style>
</head>
<body>
<!-- div 的尺寸以及文字大小，说明 font-size 的 1px 没有被浏览器识别成 12px -->
<div class = "test"></div>
<div class = "text">我是测试文字1</div>
<div class = "t2">我是测试文字2</div>
</body>
</html>
из-заviewportУстройство совместимо со многими браузерами, и вышеуказанное решение теперь официально устарело:
От схемы перехода lib-flexible можно отказаться, будь то текущая версия или предыдущая, есть определенные проблемы. Рекомендуется начать использовать видовые экраны вместо этого решения.
Две схемы 6.1.2 и 6.1.3 добавлены мной, если и есть ошибка, то она не имеет отношения к исходному тексту.
6.2 vw, vh схема
vw、vhРешение состоит в том, чтобы изменить ширину визуального окна просмотра.window.innerWidthи визуальная высота области просмотраwindow.innerHeightДелим на 100 равных частей.
надflexibleСхема фактически имитирует эту схему, т.к. ранееvwПока не совсем совместим.
-
vw (viewport's width):1vwравно визуальному вьюпорту1% -
vh (viewport's height)：1vh为视觉视口高度的1%` -
vmin:vwа такжеvhменьшее значение в -
vmax: Выбратьvwа такжеvhбольший из
Если визуальное окно просмотра375px,Так1vw = 3.75px, тогдаUIШирина данного элемента75px(независимый от устройства пиксель), нам просто нужно установить его на75 / 3.75 = 20vw.
Здесь нам не нужно преобразовывать пропорциональные отношения, мы можем использовать ·PostCSSизpostcss-px-to-viewportПлагины помогают нам в этом процессе. При написании кода нам нужно толькоUIНапишите чертежи конструкцииpxБлок.
Конечно, ни одно решение не идеально.vwЕсть и определенные недостатки:
-
pxПеревести вvwНе обязательно полностью делится, поэтому есть определенная разница в пикселях. -
при использовании контейнера
vw,marginиспользоватьpxЛегко вызвать общую ширину больше, чем100vw, что влияет на эффект макета. Конечно, мы также можем избежать этого, например, используяpaddingзаменятьmargin,результатcalc()использование функции, не практичноpxединица и т. д.
7 Адаптировать к iPhoneX
Появление iPhoneX вывело внешний вид мобильного телефона на новую высоту, в нем отменили физические кнопки и заменили их небольшой черной полосой внизу, но такие изменения усложнили разработчикам адаптацию к мобильному терминалу. .
7.1 Безопасная зона
После выпуска iPhone X многие производители последовательно выпускали телефоны с боковыми экранами.
Эти мобильные телефоны и обычные мобильные телефоны претерпели три изменения во внешнем виде: закругленные углы (углы), челка (корпус датчика) и маленькие черные полосы (индикатор Home). Чтобы адаптироваться к этим мобильным телефонам, родилась концепция безопасной зоны: безопасная зона — это видимая область окна, на которую не влияют три вышеуказанных эффекта.
Чтобы обеспечить эффект отображения страницы, мы должны ограничить страницу безопасным диапазоном, но это не влияет на общий эффект.
7.2 viewport-fit
viewport-fitразработан, чтобы соответствоватьiPhoneXРодившееся свойство используется для ограничения отображения веб-страниц в безопасной области.
-
contain: окно просмотра полностью содержит веб-контент -
cover: веб-контент полностью закрывает видимое окно
По умолчанию или установленоautoа такжеcontainТот же эффект.
7.3 env, постоянная
Нам нужно разумно поместить верх и низ в безопасную область iOS11 добавляет две функции CSS env и константу для установки расстояния между безопасной областью и границей.
Внутри функции может быть четыре константы:
- safe-area-inset-left: расстояние от безопасной зоны до левой границы
- Безопасная местность-встроенная справа: пограничная зона безопасное расстояние от права
- safe-area-inset-top: расстояние от верхней границы безопасной области
- safe-area-inset-bottom: расстояние от нижней границы безопасной области
Примечание. Мы должны указать viweport-fit для использования этих двух функций:
<meta name="viewport" content="viewport-fit=cover">
constantсуществуетiOS < 11.2действует в версии ,envсуществуетiOS >= 11.2, что означает, что нам часто приходится устанавливать их одновременно, чтобы ограничить страницу безопасной областью:
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
При использовании нижних фиксированных навигационных панелей нам нужно установить ихpaddingстоимость:
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
8 Горизонтальная экранизация
Во многих окнах просмотра мы хотим отображать разные макеты для альбомных и портретных экранов, поэтому нам нужно определить разные стили, заданные в разных сценариях:
8.1 Ландшафт обнаружения JavaScript
window.orientation: получить направление вращения экрана
window.addEventListener("resize", ()=>{
if (window.orientation === 180 || window.orientation === 0) {
// 正常方向或屏幕旋转180度
console.log('竖屏');
};
if (window.orientation === 90 || window.orientation === -90 ){
// 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
console.log('横屏');
}
});
8.2 Горизонтальный экран обнаружения CSS
@media screen and (orientation: portrait) {
/*竖屏...*/
}
@media screen and (orientation: landscape) {
/*横屏...*/
}
9 Размытые картинки
9.1 Причины
Большинство изображений, которые мы обычно используем, относятся к растровым изображениям (png, jpg...), растровые изображения состоят из пикселей, каждый пиксель имеет определенное положение и значение цвета:
Теоретически каждый пиксель растрового изображения отображается на экране с использованием физического пикселя для достижения наилучшего эффекта отображения.
пока вdpr > 1На экране растрового изображения пиксель растрового изображения может быть представлен несколькими физическими пикселями, однако этим физическим пикселям нельзя точно присвоить цвет соответствующего пикселя растрового изображения, и их можно только аппроксимировать, поэтому одно и то же изображение вdpr > 1будет размыто на экране:
9.2 Решения
Для того, чтобы обеспечить качество картинки, мы должны сделать так, чтобы один пиксель экрана максимально отображал один пиксель картинки, поэтому для разных экранов DPR нам нужно отображать картинки разного разрешения.
например: вdpr=2дважды отображает изображение на экране (@2x),существуетdpr=3Тройная диаграмма отображается на экране (@3x).
9.3 медиа-запрос
Используйте медиа-запрос, чтобы оценить различные соотношения пикселей устройства для отображения изображений с разной точностью:
.avatar{
background-image: url(conardLi_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.avatar{
background-image: url(conardLi_2x.png);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.avatar{
background-image: url(conardLi_3x.png);
}
}
Только для фоновых изображений
9.4 image-set
Использовать набор изображений:
.avatar {
background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x );
}
Только для фоновых изображений
9.5 srcset
Используя атрибут srcset тега img, браузер автоматически подберет лучшее отображаемое изображение на основе плотности пикселей:
<img src="conardLi_1x.png"
srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">
9.6 URL-адрес мозаичного изображения JavaScript
Используйте WPONAL.DEVICEPIXELRATIO, чтобы получить соотношение пикселя устройства, перейти на все изображения и замените адрес изображения:
const dpr = window.devicePixelRatio;
const images = document.querySelectorAll('img');
images.forEach((img)=>{
img.src.replace(".", `@${dpr}x.`);
})
9.7 Использование SVG
SVG означает масштабируемую векторную графику. В отличие от растрового изображения на основе пикселей, SVG относится к описанию формы изображения, поэтому по сути это текстовый файл небольшого размера, который не будет искажаться независимо от того, сколько раз его увеличивают.
Вместо того, чтобы вручную рисовать svg в коде, мы также можем использовать изображение svg, как растровое изображение:
<img src="conardLi.svg">
<img src="data:image/svg+xml;base64,[data]">
.avatar {
background: url(conardLi.svg);
}
резюме
Я надеюсь, что вы сможете достичь следующих результатов после прочтения этой статьи:
-
Уточнение общих концепций адаптации мобильных терминалов
-
Понять принцип проблемы адаптации мобильного терминала и освоить хотя бы одно решение
Вышеприведенный контент взят изЧто нужно знать о мобильной адаптации
Приведенный выше контент взят из двух блогов + часть моего собственного понимания.