Проект дизайна и рабочий процесс мобильной веб-разработки

внешний интерфейс Отзывчивый дизайн

Вот краткийПередняя система знанийЖдем вас, чтобы проверить это, посмотрите, будут сюрпризы ~ Если вы думаете, что это хорошо, пожалуйста, звездочка ~


Спасибо

Адаптация мобильного терминала всегда была проблемой, которая меня мучила, сегодня отдыхал и перерыл кучу информации, чтобы разобраться. Многие из практик в этой статье напрямую заимствованы из интернет-статей, в основном в том числеДумая о дизайне внешнего интерфейса и рабочем процессе, исходя из размера шрифта NetEase и Taobaoа такжеАдаптивное решение для страницы мобильного телефона - расширенная версия rem layout (с примером исходного кода), Слава Богу.

разрешение мобильного устройства

оборудование Размер экрана Логическое разрешение (pt) Reader Физическое разрешение (пкс)
iPhone 3GS 3,5 дюйма 320*480 @1x 320*480
iPhone 4/4S 3,5 дюйма 320*480 @2x 640*960
iPhone 5/5S/5C 4,0 дюйма 320*568 @2x 640*1136
iPhone 6/6S 4,7 дюйма 375*667 @2x 750*1134
iPhone 6/6S Plus 5,5 дюймов 414*736 @3x 1242*2208
  1. pt - логическое разрешение. Простое понимание состоит в том, что оно связано с размером экрана. Это единица длины и зрения.
  2. px — это физическое разрешение, которое понимается просто как пиксель и не имеет ничего общего с размером экрана.

Резюме: связь между pt и px заключается в том, что единица pt содержит несколько px, и чем больше px она содержит, тем четче она будет. Однако из-за особенностей сетчатки человека она может распознавать не более 2 пикселей в единице pt. Если она больше 2 пикселей, человеческий глаз не может ее распознать, поэтому 6plus не будет выглядеть четче, чем 6.

Проект дизайна и рабочий процесс мобильной веб-разработки

Одной из сложностей мобильной веб-разработки является адаптация к мобильным устройствам различного разрешения — как мы все знаем, следует использовать rem. Но на практике, как определить размер шрифта на html — сложный момент. Обычно существуют следующие способы:

Использование мультимедийных запросов CSS3

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

Очевидными недостатками использования медиазапросов CSS3 являются:

  1. Нужно написать много медиазапросов для адаптации к разным устройствам
  2. Объем медиа-запроса может быть неподходящим.
  3. Размер шрифта в каждом медиа-запросе трудно определить
  4. Каждый раз, когда вы устанавливаете rem для элемента, вам нужно вычислить его в соответствии с размером шрифта html определенного разрешения, что требует большой работы.

Резюме: медиа-запросы CSS3 теоретически возможны, но негибки в работе.

простая проблема простое решение

Некоторые веб-приложения относительно просты, просто запомните один принцип разработки: поток текста, гибкость управления и масштабирование изображения. Описано в картинках:

移动端布局1.png

Подход NetEase

Сложность страниц NetEase высока. По мере увеличения разрешения эффект страниц NetEase также будет значительно меняться. Чтобы достичь этого эффекта, вам нужно использовать rem в качестве единицы измерения, а размер шрифта html рассчитывается с помощью js. Рабочий процесс мобильного Интернета NetEase можно обобщить следующим образом:

Первый шаг - установить область просмотра окна просмотра.

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

Второй шаг — определить размер элементов тела и страницы на основе эскиза дизайна iphone6/6S.

Черновик дизайна веб-страницы Netease основан на iphone6/6S, физическое разрешение (ширина эскиза дизайна) составляет 750 пикселей, а логическое разрешение (ширина устройства) — 375. Для удобства расчета сначала разделите горизонтальное разрешение чертежа на 100, чтобы получить ширину элемента корпуса:750 / 100 = 7.5remТочно так же размер элементов на странице при верстке можно получить, разделив размер, отмеченный на чертеже конструкции, на 100.

Третий шаг - вычислить fontSize html, чтобы он соответствовал экрану каждого размера.

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

Четвертый шаг – настройка деталей

Когда deviceWidth больше горизонтального разрешения черновика дизайна, размер шрифта HTML всегда равен горизонтальному разрешению/ширине элемента body.

Причина этого в том, что когда deviceWidth больше 640, физическое разрешение больше 1280, и вам следует посетить веб-сайт ПК. Просто настройте третий шаг.

    var deviceWidth = document.documentElement.clientWidth;
    if(deviceWidth > 640) deviceWidth = 640;
    document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
Могут потребоваться дополнительные медиа-запросы

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

Таобао практики

Подготовка знаний, понимание окна просмотра

Обычно мы используем следующий код для установки области просмотра:

    <meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Таким образом, когда вся веб-страница отображается на устройстве, ширина страницы будет равна размеру логического пикселя устройства, то есть ширине устройства. Формула для расчета этой ширины устройства:设备的物理分辨率/(devicePixelRatio * scale)

DevicePixelRatio называется соотношением пикселей устройства. DevicePixelRatio каждого устройства известно и неизменно. В настоящее время экран высокой четкости обычно равен 2, но есть и более высокие, например 2,5, 3 и т. д. Предпосылка макета сенсорного экрана Taobao заключается в том, что масштаб области просмотра динамически устанавливается в соответствии с devicePixelRatio.

  • Когда devicePixelRatio равно 2, масштаб равен 0,5.
  • Когда devicePixelRatio равно 3, масштаб равен 0,3333.

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

Следующая проблема, которую необходимо решить: Как рассчитать размер элемента, например ширина элемента на эскизе дизайна 150px, как ее перевести в rem?这个值等于设计稿标注尺寸/该设计稿对应的html的font-size. Возьмем, к примеру, Taobao, черновик дизайна, который они используют, составляет 750, поэтому размер шрифта html равен 75. Если элемент имеет ширину 150 пикселей, это 150 / 75 = 2rem при преобразовании в rem.

Первым шагом является динамическая установка масштаба области просмотра.

    var scale = 1 / devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

Второй шаг — динамически рассчитать размер шрифта html.

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

Поскольку на первом шаге масштаб динамически устанавливается в соответствии с devicePixelRatio, ширина устройства равна горизонтальному физическому разрешению страницы (document.documentElement.clientWidth), которое является горизонтальным физическим разрешением черновика проекта. Подход Taobao заключается в том, что черновик дизайна составляет 750, тогда размер шрифта html составляет 75.

Третий шаг — определить размер каждого элемента во время верстки.

布局的时候，各元素的css尺寸 = 设计稿标注尺寸/设计稿横向分辨率/10 = 设计稿标注尺寸/html的font-size

Четвертый шаг – настройка деталей

  1. Font-size может потребовать дополнительных медиа-запросов, а font-size не использует rem, как и NetEase.
  2. Как и NetEase, Taobao также установил критическую точку. Когда горизонтальное физическое разрешение устройства больше 1080, размер шрифта HTML не изменится. Причина та же. Разрешение уже можно использовать для доступа к страница компьютерной версии. .

По сравнению с подходом NetEase

Общая основа:

  1. Его можно адаптировать ко всем мобильным устройствам.Для планшета NetEase и Taobao перейдут на страницу ПК и больше не будут использовать версию страницы с сенсорным экраном. Оба должны динамически устанавливать размер шрифта html
  2. Значение размера каждого элемента при верстке рассчитывается в соответствии с размером, отмеченным в черновике дизайна.Поскольку размер шрифта HTML регулируется динамически, макет страницы можно изменять в равных пропорциях под разными разрешениями.
  3. Размер шрифта элемента контейнера не нуждается в rem, и требуется дополнительный медиа-запрос для размера шрифта.
  4. Его можно применять к эскизам дизайна разных размеров, если вы используете методы, описанные выше.

разница

  1. Taobao также нужно динамически задавать масштаб области просмотра, NetEase это не нужно.
  2. Практика Netease, значение rem очень легко рассчитать, практика Taobao может потребовать использования процессоров less и sass css.

Макет решения высокой четкости команды Али

Исходный код программы HD

    'use strict';

    /**
     * @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清;  
     * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
     * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
     */
    const win = window;
    export default win.flex = (normal, baseFontSize, fontscale) => {
      const _baseFontSize = baseFontSize || 100;
      const _fontscale = fontscale || 1;

      const doc = win.document;
      const ua = navigator.userAgent;
      const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
      const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
      const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
      const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
      let dpr = win.devicePixelRatio || 1;
      if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
        // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
        dpr = 1;
      }
      const scale = normal ? 1 : 1 / dpr;

      let metaEl = doc.querySelector('meta[name="viewport"]');
      if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        doc.head.appendChild(metaEl);
      }
      metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
      doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
    };

принцип

Это согласуется с принципом Taobao выше.动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，此时device-width便等于页面的横向物理分辨率（document.documentElement.clientWidth），也就是设计稿的的横向物理分辨率。

Преимущество

  1. Простое цитирование и удобный макет
  2. В соответствии с DPR экрана устройства автоматически устанавливается наиболее подходящий масштаб HD.
  3. Это обеспечивает согласованность визуального опыта на разных устройствах. (Старая схема заключается в том, что чем больше экран, тем больше элемент; эта схема заключается в том, что чем больше экран, тем больше вы видите)
  4. Эффективно решить реальную проблему 1px на мобильной стороне (1px здесь — это физический пиксель на экране устройства)

использовать

Эта схема тоже по умолчанию 1рем = 100px.При верстке размер физического разрешения можно получить по размеру чертежа/100

Меры предосторожности

  1. Если ширина элемента больше половины ширины рендеринга (ширина рендеринга 640 или 750), решительно используйте процентную ширину или гибкий макет. Можно избежать проблемы с горизонтальной полосой прокрутки на iphone5, аналогичной проблеме с iphone6.
  2. Эта схема заключается в динамической установке размера шрифта html в соответствии с dpr устройства, а DPR по умолчанию равен 2, 1rem = 100px, если черновик дизайна iphone 6 sp (dpr = 3), последний из кодаflex(false, 100, 1)изменился наflex(false, 66.66667, 1)

Как сотрудничать с дизайнерами

手机淘宝团队适配协作模式.png

  1. На этапе визуального дизайна дизайнер делает эскиз шириной 750 пикселей (iPhone 6) и использует векторные пути для всех элементов дизайна, кроме изображений. После того, как дизайн будет завершен, сделайте аннотацию на эскизе дизайна размером 750 пикселей и выведите карту аннотаций. В то же время пропорционально увеличьте в 1,5 раза, чтобы создать черновик дизайна шириной 1125 пикселей, и обрежьте изображение в черновике 1125 пикселей.
  2. Выведите инженеру-разработчику два результата: один — ресурс среза @3x, используемый программой, а другой — карта аннотаций дизайна шириной 750 пикселей. Причина, по которой я хочу вырезать его на изображении @3x, заключается в том, что сейчас на рынке есть много экранов сверхвысокой четкости, таких как Meizu Note, а devicePixelRatio достиг 3. Это вырезанное изображение гарантированно будет четко отображаться на всех устройствах. .
  3. Инженер-разработчик получает карту аннотаций 750px и ресурсы карты разреза @3x для завершения разработки интерфейса iPhone6 ​​(375pt), и ему необходимо использовать метод адаптации, упомянутый выше.
  4. На этапе адаптации и отладки, на основе эффекта интерфейса iPhone 6, эффекты интерфейса iPhone 6 plus (414pt) и iPhone 5S и ниже (320pt) были отлажены вверх и вниз соответственно. На этом трехэкранная адаптация больших, средних и малых экранов завершена.
Категории