Оригинальный адрес:GitHub.com/hu J IA oh J/ Первоначально…
Макет веб-мобильного терминала очень широк, и есть несколько основных тем:
- Адаптация мобильного терминала
- 1px border
- Базовая компоновка
Эта статья в основном посвящена этим трем темам.
1. Адаптация мобильного терминала
Когда дело доходит до адаптации мобильного терминала, все думают об этомrem,flexible.js, схема, которой мы будем делиться в этой статье,vw + rem
Для студентов, которые не знакомы с адаптацией мобильного терминала, вы можете ознакомиться с:
- Используйте гибкий инструмент для реализации терминальной адаптации страниц Hand Tao H5.
- Поговорим об адаптации мобильных страниц
- Как использовать vw в проекте Vue для мобильной адаптации
что такое вв?
vw — это единица длины, основанная на виде (видовом экране), и четыре единицы, относящиеся к видовому экрану:
- vw: сокращение для ширины области просмотра, 1vw равно 1% от window.innerWidth.
- vh: сокращение для высоты области просмотра, 1vh равно 1% от window.innerHeight.
- vmin: меньшее из текущих vw и vh
- vmax: большее из текущих vw и vh
Обычная схема адаптации rem (в том числе гибкая) на самом деле предназначена для имитации эффекта vw посредством динамического расчета js.Основная причина использования этой схемы в прошлом заключается в том, что vw имеет определенные проблемы с совместимостью, но на данный момент vw может в основном удовлетворять требованиям для Совместимость
Видно, что поддерживаются Android 4.4 и выше и IOS 8.0 и выше, так что теперь мы можем напрямую использовать vw для мобильной адаптации.
vw + рем схема
1. Установите размер шрифта html на 10vw
html {
font-size: 10vw;
}
2. Возьмите карту 750ui в качестве примера. В CSS используйте значение длины на карте пользовательского интерфейса напрямую, и устройство установлено на PX.
.head {
width: 750px;
}
3. Представьтеpostcss-pxtoremПлагин настроен следующим образом:
require('postcss-pxtorem')({
rootValue: 75,
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
})
Выше вы можете использовать решение vw + rem для достижения мобильной адаптации.
4. Представьтеviewport-units-polyfillИсправить проблемы совместимости
Чтобы обеспечить нормальное отображение страницы на моделях с низкими версиями, можно ввести viewport-units-polyfill для решения проблем совместимости с vw.
viewport-units-polyfill на самом делеviewport-units-buggyfillупрощенная версия.
Краткое введение в реализацию viewport-units-buggyfill: вводя js, для версии с проблемами совместимости пройтись по всему CSS на странице, найти CSS, который использует единицу Viewport, вычислить единицу Viewport как единицу px. , и преобразовать новые правила css вставляются в заголовок или тело.
viewport-units-polyfill основан на viewport-units-buggyfill и вносит некоторые изменения, в основном для удаления большого объема работы по обходу и обработки совместимости только для размера шрифта html (эта схема адаптации используется только в размере шрифта html для вв). Удаление работы обхода значительно оптимизирует производительность.
Использование: поместите этот js-скрипт прямо в заголовок страницы.
2. граница 1px
В Интернете есть много решений проблемы с границей 1px, вы можете посмотреть:Поговорим о решении 1px под Retina
Решение, представленное в этой статье, заключается в использовании масштаба области просмотра для решения проблемы с границей в 1 пиксель на основе решения адаптации vw + rem.
выполнить
(function () {
var dpr = window.devicePixelRatio;
var scale = 1 / dpr;
var metaEl = document.querySelector('meta[name="viewport"]') || document.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover');
if (document.documentElement.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = document.createElement('div');
wrap.appendChild(metaEl);
document.write(wrap.innerHTML);
}
})();
Идея очень проста, то есть масштаб Viewport устанавливается равным 1/dpr (соотношение пикселей устройства), чтобы решить проблему границы в 1 пиксель.
Примечание: Этот сценарий является простой версией. После тестирования различных марок и моделей было обнаружено, что это решение в основном работает хорошо. Только для нескольких мобильных телефонов Meizu будет проблема слишком тонких рамок. Основная причина в том, что dpr мобильного телефона Meizu равен 3, но реальное разрешение экрана невысокое (мое личное понимание не подтверждено данными, и заинтересованные друзья могут это проверить), поэтому вид слишком увеличен. много, что приводит к границе. Если это слишком подробно, решение состоит в том, чтобы использовать взлом (я пока не придумал лучшего, и друзья, у которых есть другие методы, могут комментировать и обмениваться ~)
(function () {
// 1px
var dpr = window.devicePixelRatio;
var isIPhone = window.navigator.appVersion.match(/iphone/gi);
var UA = window.navigator.userAgent;
// 对 meizu 某型号进行hack，主要原因是 dpr为3，但是手机屏幕分辨率不够，会出现 1px border 过细的问题，这种问题主要出现在部分魅族手机上
var hacks = ['m1 note'];
var flag = false;
hacks.forEach(function (item) {
if (UA.indexOf(item) >= 0) {
flag = true;
return;
}
});
if (!isIPhone && flag) {
dpr = dpr >= 2 ? 2 : dpr;
}
var scale = 1 / dpr;
var metaEl = document.querySelector('meta[name="viewport"]') || document.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover');
if (document.documentElement.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = document.createElement('div');
wrap.appendChild(metaEl);
document.write(wrap.innerHTML);
}
})();
Поместите приведенный выше скрипт в шапку страницы, при разработке границы 1px это может быть прямо следующим образом:
.border {
border-bottom: 1PX solid #eee;
}
Примечание: если вы используете такой плагин, как postcss-pxtorem, вам нужно быть осторожным, чтобы вы не могли преобразовать эту единицу 1px в rem.Метод, который я использую, заключается в использовании PX в верхнем регистре для px, которые не нужно преобразовывать, так что postcss- pxtorem не будет преобразован.
3. Базовая компоновка
Базовая компоновка на самом деле охватывает многие аспекты, такие как:
- Общий вид страницы
- Копирайтинг и иконка
- Различное выравнивание по центру (вертикальное, горизонтальное)
- Текст выровнен со значком (значок должен использовать шрифт значка вместо изображения)
- расслоение по z-индексу
1. Общий вид страницы
Более распространенная компоновка страниц H5 состоит в том, что страница разделена на три части: заголовок, основная часть и нижняя часть. Головная и нижняя части будут иметь эффект всасывания сверху и снизу. Есть некоторые проблемы с обычным фиксированным макетом. рекомендуется использовать гибкий макет в целом. , голова и нога фиксированы, а тело можно прокручивать, как показано ниже:
<div id="page">
<div id="hd">
<!-- head -->
</div>
<div id="bd">
<!-- body -->
</div>
<div id="ft">
<!-- foot -->
</div>
</div>
#page {
display: flex;
flex-direction: column;
position: relative;
height: 100%;
overflow: hidden;
}
#hd {
z-index: 999;
}
#bd {
flex-grow: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
2. Копирайтинг и иконка
использовать иконочный шрифт
Примечание: iconfont не поддерживает многоцветные значки, поэтому для многоцветных значков можно использовать svg или img.
Центрировать по вертикали и горизонтали
Существует множество реализаций:CSS-tricks.com/centering — Из…
Текст выровнен со значком
<div class="box">
<span>文案与icon垂直居中，水平对齐</span>
<span class="icon-span">
<i class="icons"></i>
</span>
</div>
.box {
height: 92px;
font-size: 32px;
line-height: 1;
padding: 0 20px;
display: flex;
align-items: center;
.icon-span {
font-size: 24px;
line-height: 1;
.icons {
color: red;
margin-left: 8px;
}
}
}
3. Наслоение z-индекса
Стандартизируйте использование z-index, чтобы предотвратить проблемы с отображением на странице из-за злоупотреблений, и используйте его в слоях:
$z-layers: (
'below': -1,
'default': 1,
'content': (
'base': 100
),
'fixed': 990,
'mask': 1000,
'modal': 1020,
'toast': 1040
);
Для простоты использования используйте следующие методы scss:
$z-layers: (
'below': -1,
'default': 1,
'content': (
'base': 100
),
'fixed': 990,
'mask': 1000,
'modal': 1020,
'toast': 1040
);
@function map-has-nested-keys($map, $keys...) {
@each $key in $keys {
@if not map-has-key($map, $key) {
@return false;
}
$map: map-get($map, $key);
}
@return true;
}
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
@function z($layers...) {
@if not map-has-nested-keys($z-layers, $layers...) {
@warn "No layer found for `#{inspect($layers...)}` in $z-layers map. Property omitted.";
}
@return map-deep-get($z-layers, $layers...);
}
Конкретное использование заключается в следующем:
.head {
z-index: z('fixed');
}
Макет, упомянутый выше, вы можете перейти кДЕМО-страницаСмотри, QR-код:
Код:GitHub.com/hu J IA oh J/ также 5…
Я протестировал вышеуказанные решения на нескольких популярных мобильных телефонах, и в основном они работают хорошо.
напиши в конце
Все решения, представленные в этой статье, используются в моей повседневной работе, и я надеюсь быть полезным для тех, кто в этом нуждается~~~
Если вам понравилась моя статья, вы можете перейтимой личный блогнажмите звездочку ⭐️