предисловие
Недавно я написал третий мобильный проект H5, и я собираюсь записать некоторые из моих практических исследований в проекте H5. Вероятно, одно из самых больших различий между мобильным H5 и разработкой для ПК заключается в том, чтоАдаптивный макетвопрос.
Итак, давайте поговорим об адаптивном макете для мобильных устройств, разберемся в его тонкостях и изучим лучшие доступные решения.
вопрос
Полный текст будет обсуждать и расширять следующие вопросы:
- Каковы примечательные моменты мобильных страниц, связанных с H5, по сравнению с ПК?
- Какие есть решения для адаптивной верстки H5 для мобильных устройств?
- Что такое рем? Как правильно использовать это в проекте?
- Является ли vh/vw лучшим решением? Каковы его преимущества и недостатки?
- Какие решения обычно используются в больших библиотеках с открытым исходным кодом?
- Как быстро построить решение мобильного макета?
источник
концепция
Что такое технология H5?
Само название H5 очень неудачное имя, на первый взгляд его принимают за HTML5, или тег заголовка пятого уровня, что у некоторых вызовет массу недоразумений.
Например: некий мой back-end коллега говорил о том, насколько простой H5.Я также изучил HTML раньше.Если вы попросите отпуск в будущем, я напишу его для вас.
Я ослеп, H5 === HTML?
Посмотрите еще раз, что такое H5 H5 в поисковике? (Цитата из Гугла"
Таким образом, есть много людей, которые рассматривают H5 как HTML, а концепция H5 уникальна только для Китая, поэтому иностранцы также думают, что это HTML, поэтому для иностранцев и людей, которые не в этой области, они такое же недоразумение.
Нынешний H5 — это относительно большая концепция, я думаю, что технология H5Коллекция мобильных веб-интерфейсовПримерно представлено диаграммой Венна следующим образом
Здесь мы говорим только о технологии H5 в веб-интерфейсе, сама технология H5 используется длямобильная веб-страница. Поскольку само приложение имеет контейнер «веб-просмотра», код, связанный с веб-интерфейсом, может быть запущен в контейнере, и получается комбинация H5 и собственного приложения.Технология гибридных приложений.
Общий принцип технологии гибридных приложений
Это изображение я нарисовал, чтобы популяризировать знания H5 среди своих коллег в компании.
Разница между мобильным Интернетом и Интернетом для ПК
Оглядываясь назад, как мы выкладывались на стороне ПК?
Обычно используются две схемы, однаmin-widthОграничить минимальную ширину, ширина браузера меньшеmin-widthпросто прокрутите. Другой - оставить пробелы. Устанавливает базовую ширину страницы, а превышение остается пустым.
Но применимы ли оба решения для мобильных устройств?
Ширина мобильных телефонов в основном непостоянна, и нет возможности масштабировать окно. Пусть мобильный терминал прокручивается, опыт еще хуже, не говоря уже о том, что базовые возможности отображения страницы очень плохи по сравнению с производительностью родного приложения.
Так что насчет пустого места? Что еще более невозможно, ширина самого мобильного устройства мала, и в принципе невозможно что-либо увидеть, если вы оставите его пустым.
Поэтому для того, чтобы сделать такой веб-опыт похожим на нативное приложение, появилась технология H5. дальнейшие производныеHybird, хотя и не так хорошо, как производительность приложения, но вГорячее обновлениеУ него абсолютное преимущество в Китае, и есть то, что нельзя заменить оригиналом.
Давайте попрактикуемся в одной из самых основных технологий H5.Мобильный адаптивный макет.
упражняться
Решение первое: rem + pxToRem
концепция
В css есть две единицы измерения, однаабсолютная единица, другойОтносительная единица.
абсолютная единица
px, необходимо использовать другую возможную печать.
Относительная единица
emа такжеremпринадлежат паре,vwа такжеvhпринадлежат паре.
предыдущая пара относительноразмер шрифта, разница в том, чтоremотносительнокорневой шрифт, нам относительно легко контролировать общий размер, поэтому мы можем использовать его для управления масштабированием всей страницы.
Последняя пара, связанная с размером области просмотра, будет играть главную роль в следующем разделе.
принцип
- Ширина окна экрана монитора назначается
htmlизfont-size. В этом случае размер корневого шрифта будет меняться в зависимости от ширины экрана. - Буду
pxПеревести вrem, Существуют две традиционные схемы, одна из которых заключается в использованииsass/lessпользовательская функция вpxToRem,Напишитеpxкогда используешьpxToRemфункция преобразуется вrem. Другой - напрямую написатьpx, в процессе компиляции используются плагины для преобразования всехrem. такdomРазмер элемента будет меняться в зависимости от ширины экрана.
выполнить
- Динамически обновлять размер корневого шрифта
const MAX_FONT_SIZE = 420
// 定义最大的屏幕宽度
document.addEventListener('DOMContentLoaded', () => {
const html = document.querySelector('html')
let fontSize = window.innerWidth / 10
fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
html.style.fontSize = fontSize + 'px'
})
-
pxПеременаrem
pxToRemВариант первый
$rootFontSize: 375 / 10;
// 定义 px 转化为 rem 的函数
@function px2rem ($px) {
@return $px / $rootFontSize + rem;
}
.demo {
width: px2rem(100);
height: px2rem(100);
}
pxToRemВариант 2
существуетvue-cli3Серединаpostcss-pxtoremПлагин можно, другие платформы тоже примерно почти идеи.
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = {
// ...
css: {
sourceMap: true,
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5,
propList: ['*']
})
]
}
}
}
}
Нажмите, чтобы быстро настроить проект проекта H5
продолжай исследоватьpostcss-pxtoremИсходный код плагина, чтобы увидеть принцип его реализации.
function createPxReplace (rootValue, unitPrecision, minPixelValue) {
return function (m, $1) {
if (!$1) return m;
var pixels = parseFloat($1);
if (pixels < minPixelValue) return m;
var fixedVal = toFixed((pixels / rootValue), unitPrecision);
return (fixedVal === 0) ? '0' : fixedVal + 'rem';
};
}
pxпревратиться вremВ основном эта функция, конечно, там много настраиваемых параметров, основной принцип аналогичен нашему плану. Удобство в том, что нет необходимости каждый раз писатьpxНужно добавить функцию, и код станет намного понятнее.
все элементы
pxбыть преобразованным вremШерстяная ткань? Это не обязательно.borderсерединаpxне должен поворачиватьсяrem, с участием другого1pxпроблем, подробно рассмотренных в предыдущей статье, избежатьpxПеременаrem,БудуborderсерединаpxкапитализироватьPX/Px/pX
Проблема с адаптацией 1px, пожалуйста, перейдите кПонимание мобильного 1px
Решение второе: vh + vw
принцип
vwЕдиницы измерения относительно ширины области просмотра зависят от ширины. С этой точки зрения первое решение фактически является «взломом» второго решения, а эффект от второго решения достигается за счет использования мониторинга.
выполнить
Подобно rem, используйте его напрямуюpostcss-px-to-viewportПлагин настроен, и способ настройки такой же, как иpostcss-pxtoremПочти такой же.
Посмотрим, принцип работы плагина тот же?
function createPxReplace(opts, viewportUnit, viewportSize) {
return function (m, $1) {
if (!$1) return m;
var pixels = parseFloat($1);
if (pixels <= opts.minPixelValue) return m;
var parsedVal = toFixed((pixels / viewportSize * 100), opts.unitPrecision);
return parsedVal === 0 ? '0' : parsedVal + viewportUnit;
};
}
Конечно же, даже имена методов, имена переменных и логика кода точно такие же, хахаха! Я не буду указывать, кто кого скопировал!
другие решения
| строить планы | дефект | |
|---|---|---|
| 1 | процент | Высота не может быть в процентах |
| 2 | Запросы СМИ +metaсерединаviewport
|
Разные устройства имеют разную ширину, и коэффициент масштабирования не может быть полностью определен. |
| 3 | flex |
Все еще не могу решить проблему превышения ширины |
Все вышеперечисленные решения имеют фатальные недостатки, и не рекомендуется использовать их для выполнения расчетов мобильной верстки.
flexа такжеremЛучше использовать в комплексе
совместимость
Два вышеуказанных варианта,Совместимость в основном заключается в ключевых словах rem, vh, vw.
remПроизводительность до 100% на мобильных устройствах — это потрясающе!
vh vwПроизводительность пока вполне удовлетворительная, будут проблемы с совместимостью в случае с младшими версиями сафари, но это не повлияет на него и станет лучшим решением для мобильной верстки.
Библиотеки с открытым исходным кодом
библиотека компонентов Ванта
В библиотеке компонентов vant по умолчанию используетсяpxУкажите единицу измерения, используйте при необходимостиrem, Непосредственно подключите идеальную посадку.
дляvwсхема, вант так же можно добавить через плагиныpxПревратиться вvw,дляvwМогут быть ямки.
библиотека компонентов ant-design-mobile
Библиотека компонентов ant-design-mobile все еще используется.pxединица измерения
@hd: 1px; // 基本单位
// 字体尺寸
// ---
@font-size-icontext: 10 * @hd;
@font-size-caption-sm: 12 * @hd;
@font-size-base: 14 * @hd;
@font-size-subhead: 15 * @hd;
@font-size-caption: 16 * @hd;
@font-size-heading: 17 * @hd;
// 圆角
// ---
@radius-xs: 2 * @hd;
@radius-sm: 3 * @hd;
@radius-md: 5 * @hd;
@radius-lg: 7 * @hd;
@radius-circle: 50%;
// 边框尺寸
// ---
@border-width-sm: 1PX;
@border-width-md: 1PX;
@border-width-lg: 2 * @hd;
а такжеvantкомпоненты,Разработчик должен решить, какой из них использовать.
Это самый гибкий подход к библиотеке с открытым исходным кодом, чтобы дать право разработчику..
Суммировать
Благодаря этой статье вы, вероятно, понимаете все тонкости проблемы H5, а также понимаете, как решить проблему адаптивного макета для мобильных устройств.Если эта статья может решить ваши вопросы или проблемы на работе, вы также можетепоставить лайкЛюбимый.
В связи с ограниченным техническим уровнем, если в статье есть какая-либо ошибка, укажите ее в комментариях, спасибо!
предыдущий пост, решено1px проблема, эта статья посвященаАдаптивный макетвопрос. Далее, я должен продолжить исследованияРезюме некоторых подводных камней о H5. После этого я должен изучитьvue последний исходный кодПоделись снова. Если вы хотите узнать больше, пожалуйста, нажмитеСфокусируйся напеть!