У меня есть проект дизайна, как мне разработать мобильный терминал?

внешний интерфейс

Выходите и смешивайте, тем, кто смешивал в прошлом, рано или поздно придется отплатить (￣Д ￣)┍ .

Решим несколько задач:

1. Что такое окно просмотра и что оно делает?

упомянулviewport, Я всегда чувствовал себя резким раньше, но когда я недавно работал над мобильным проектом, я вдруг обратил внимание на то, что было проигнорировано.metaКогда я назвал это, я вдруг понял (о(╯□╰)о). Итак, сначала разберемсяmetaТеги ☛Узнайте о метатегах, которые были проигнорированы, а потом посмотриviewport, это легко запомнить, не так ли?metaЗначение атрибута имени в теге.

Так что же он делает? Чтобы понять его конкретную роль, нам нужно сначала понять некоторые связанные с ним базовые знания.

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

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

viewportФункция состоит в том, чтобы контролировать самый высокий блок-контейнер вашего сайта:<html>элемент. можно понимать какviewportзаключается в размещении<html>элемент элемента.<html>Ширина элемента равна ширине браузера, т.е.viewport100% ширины. (оригинальный)

Окно просмотра отличается на мобильном телефоне и ПК. Окно просмотра на стороне ПК — это область окна браузера, в то время как на стороне мобильного устройства есть три разных концепции области просмотра:布局视口,视觉视口,理想视口.

  • layout viewport（布局视口）: базовое окно макета веб-страницы в браузере ПК эквивалентно размеру окна текущего браузера (за исключением границ, полей и полос прокрутки). На мобильной стороне области просмотра макета присваивается значение по умолчанию, большая часть которого составляет 980 пикселей, что гарантирует, что веб-страница ПК может отображаться в мобильном браузере, но она очень мала, и пользователь может вручную увеличить веб-страницу. страница. в состоянии пройтиdocument.documentElement.clientWidth/clientHeightПолучите размер области просмотра макета веб-страницы в стандартном режиме.
  • visual viewport（视觉视口）: часть экрана, которую пользователь может видеть на мобильном устройстве. в состоянии пройтиwindow.innerWidth / innerHeightчтобы получить размер визуального окна просмотра.
  • ideal viewport（理想视口）: идеальный размер страниц сайта для мобильных устройств. Сделав ширину страницы равной ширине устройства (область просмотра макета = идеальная область просмотра = область визуального просмотра), мы можем видеть нормальные и удобные страницы на мобильных экранах. позвонивscreen.width / heightчтобы получить идеальный размер области просмотра.

(👉👉мобильная адаптация вьюпорта,Что нужно знать о мобильной адаптации)

布局视口

视觉视口

理想视口

viewportНастройки не влияют на страницы ПК, но важны для страниц мобильных устройств.

Введение атрибута

Атрибуты значение ценность
width Определяет ширину области просмотра в пикселях. положительное целое число или ширина устройства ширина устройства
height Определяет высоту области просмотра в пикселях. положительное целое число или высота устройства
initial-scale Определите начальное значение масштабирования Целое или десятичное
minimum-scale Определяет минимальный масштаб для уменьшения, он должен быть меньше или равен настройке максимального масштаба. Целое или десятичное
maximum-scale Определяет максимальный масштаб масштабирования, он должен быть больше или равен настройке минимального масштаба. Целое или десятичное
user-scalable Определяет, разрешать ли пользователю вручную масштабировать страницу, значение по умолчанию — «да». yes/no

Основное использование и функции

<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, что эквивалентно разрешению视觉视口равный理想视口;
  • maximum-scale=1.0Указывает, что максимальный коэффициент масштабирования страницы равен 1;
  • user-scalable=noУказывает, что пользователю не разрешено масштабировать страницу.

🌟viewportатрибутэффект, то есть пусть布局视口Масштабирование по ширине экрана,width=device.widthпросто позволь布局视口Начальный размер равен ширине устройства, устанавливается позжеinitial-scaleдля масштабирования布局视口размер, а значение по умолчанию布局视口Начальный размер равен ширине устройства, т. н.理想视口.

2. Что такое рем? Каков принцип его компоновки?

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

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

3. Зачем масштабировать? Связь между масштабом и dpr?

dpr ( device pixel ratio): Соотношение пикселей устройства, то есть отношение физических пикселей устройства к логическим пикселям (CSS-пикселям).

window.devicePixelRatio
  • В области веб-интерфейса пиксели делятся на设备像素иCSS像素;
  • ОдинCSS像素Размер страницы является переменным, например, когда пользователь масштабирует страницу, он фактически уменьшает или увеличивает масштаб.CSS像素,и设备像素Размер и количество остаются прежними.

[Эскизный проект]: предоставляется дизайнером750pxШирокий проектный проект основан на设备像素(device pixel，物理像素) Как единица производственного проекта проекта.

[написание веб-страниц]: что пишут фронтенд-инженеры при кодировании веб-страницCSS 像素необходимо основываться на设备像素比для преобразования.

Соотношение пикселей устройства (DPR) = пиксели устройства / пиксели CSS идеального окна просмотра (ширина устройства), затем:

Пиксели CSS = пиксели дизайна/dpr.

масштабирование влияет布局视口размер, когда мы увеличиваем и уменьшаем страницу на мобильной стороне, мы фактически изменяем размер пикселей CSS, в то время какЦель масштабирования — адаптировать пиксели CSS к пикселям мобильного устройства., и это масштабирование достигается за счет двух ключевых настроек элемента:

width=device-width,initial-scale=1/dpr

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

var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
    // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
    if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
        dpr = 3;
    } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
        dpr = 2;
    } else {
        dpr = 1;
    }
} else {
    // 其他设备下，仍旧使用1倍的方案
    dpr = 1;
}
scale = 1 / dpr;

💡rem — решить проблему разной ширины разных моделей, а scale — решить проблему dpr. Мобильная адаптация не имеет отношения к дпр.

Решение Taobao использует dpr для решения проблемы 1px, в то время как решение Netease не вводит dpr, область просмотра макета не увеличивается, и вся страница не масштабируется, но это не влияет на пропорции дизайна.

➹Действительно, мобильное изменение размера не имеет ничего общего с dpr

➹Подробно объясните понятие адаптации.

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

🙋После того, как я получил проект дизайна, с чего мне начать?

через вышеуказанноеremПреобразование, мы можем знать, как преобразовать визуальный проект (750px) элементов вpxпреобразовать вrem.

(1) Установите размер шрифта html, например, разделив экран мобильного телефона на 10 частей:

<script>
    var dpr = window.devicePixelRatio;
    var meta = document.createElement('meta');

    // dpr
    meta.setAttribute('content', 'initial-scale=' + 1 / dpr + ', maximum-scale=' + 1 / dpr + ', minimum-scale=' + 1 / dpr + ', user-scalable=no');
    document.getElementsByTagName('head')[0].appendChild(meta);

    // rem
    document.addEventListener('DOMContentLoaded', function (e) {
        document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
    }, false);
</script>

(2) Предположим, что ширина элемента равна300px, то ширина элемента:

Автоматическое преобразование может быть достигнуто с помощью следующих схем:

✔Scssплан

$ue-width: 750; /* ue图的宽度 */

@function px2rem($px) {
  @return #{$px/$ue-width*10}rem;
}

p {
  width: px2rem(100);
}

✔ в vscodepxприбытьremпреобразование:vscode-cssrem

✔postcss-pxtoremплан

// postcss.config.js
const pxtorem = require('postcss-pxtorem');
const pxtoremOpts = {
    rootValue: 16,  // 根字体大小，默认16
    unitPrecision: 5,  // 精度
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],  // 可以将px转换成rem的属性
    selectorBlackList: [],  // 选择器忽略并保留px
    replace: true,  // 替换包含rems的规则
    mediaQuery: false,  // 是否允许在媒体查询中转换px
    minPixelValue: 2  // 设置要替换的最小像素值
};
module.exports = {
  plugins: [
    pxtorem(pxtoremOpts),
  ],
};

5. Общие разрешения мобильных терминалов

нажмитеDEVICE METRICSПосмотреть дополнительные параметры терминального оборудования.

➹ Ссылка

Категории