Дорога фронтенд-архитектора 02_План расположения мобильного терминала

1 План расположения мобильного терминала

1.1 Процентная раскладка (поточная раскладка)

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

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

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

дочерний элемент	Исходная величина
ширина высота	В зависимости от прямого родительского элемента дочернего элемента ширина зависит от ширины родительского элемента, высота зависит от высоты родительского элемента.
верх/низ, лево/право	Высота/ширина относительно непосредственно нестатически позиционированного родительского элемента.
отступ/поля	Будь то вертикальное или горизонтальное направление, оно зависит от ширины прямого родительского элемента и не имеет ничего общего с высотой родительского элемента.
граница-радиус	Ширина относительно себя

Преимущества процентной раскладки

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

Недостатки процентной компоновки

• Если диапазон масштаба экрана слишком велик, а экран слишком велик или слишком мал по сравнению с эскизом проекта, он не может нормально отображаться.При использовании мобильного телефона с большим экраном или переключении между горизонтальным и вертикальным экранами элементы страницы могут растягивается и деформируется, а размер шрифта не может меняться в зависимости от размера экрана.
• При настройке различных атрибутов блочной модели ссылочные элементы для процентных настроек не уникальны, что может легко усложнить проблемы с макетом.
• Объем вычислений в процессе разработки велик, и легко выбрать неправильную систему отсчета. Когда размер экрана слишком сильно превышает проектный проект, дисплей будет сильно деформирован по сравнению с исходным проектным проектом, и если вы не обращайте внимания на расчет адаптации в вертикальном направлении, это легко Длина и ширина не соответствуют проектному проекту Кроме того, положение фона относится к пикселям фонового изображения, а странный режим IE отличается разбор блочной модели также повлияет на эталонное значение;
• Проблема вертикальной адаптации! ! ! Поскольку соотношение ширины мобильных телефонов, представленных на рынке, не является точным, никогда не рассчитывайте процент высоты на основе ширины, а следует рассчитывать его на основе высоты.Другие ссылки см. в таблице выше.

1.2 Гибкая планировка

Макет Flexbox — это новый режим макета в CSS3, который упрощает создание адаптивных макетов веб-сайтов. Гибкая компоновка блока добавляет модульу гибкости, позволяя нам попрощаться с плавающим элементом и идеально добиться вертикального центрирования. В настоящее время он поддерживается практически всеми основными браузерами.

Гибкий принцип компоновки

Гибкая компоновка используется для обеспечения максимальной гибкости коробочной модели. Любой контейнер можно обозначить как гибкую компоновку. Элемент, использующий гибкий макет, называется контейнером, и все его дочерние элементы автоматически становятся членами контейнера, называемыми гибкими элементами.

Преимущества гибкой планировки

• Чистое решение CSS+HTML, родительский элемент display:flex, а дочерние элементы могут задавать макет, направление расположения, метод расположения, метод распределения и т. д.
• Структура HTML понятна. Нужно меньше слоев
• Хорошее выравнивание и выравнивание по центру, особенно на мобильных устройствах, может прекрасно заменить различные сложные решения по центрированию, которые требовались ранее: позиционирование плюс поле, поле: авто и т. д.

Недостатки гибкой компоновки

Для младших старых машин те, которые не поддерживают атрибут flex, не очень дружелюбны.

1.3 Схема адаптации Rem

Решения по адаптации Rem обычно используют медиа-запросы для реализации адаптивного дизайна макета.

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

rem — это новая единица относительной длины в CSS 3. При использовании единиц rem <html>размер шрифта корневого узла определяет размер rem.

принцип компоновки rem адаптации

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

Динамически задайте размер шрифта html, получив фактическую ширину экрана, 1rem = размер шрифта html в пикселях (размер шрифта).

схема расчета бэра

(function (doc, win) {
    
    
    let docEl = doc.documentElement, // 获取html
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        width = 750, // 设计稿宽，用时只需要修改这一处
        recalc = function () {
    
    
            const clientWidth = docEl.clientWidth; // 获取设备尺寸
            if (!clientWidth) return; // 如果没有值，回去
            if (clientWidth > width) {
    
    
                // 如果超过设计稿宽度，就给一个固定值
                docEl.style.fontSize = "100px";
                docEl.style.width = width + "px";
                docEl.style.margin = "0 auto";
            } else {
    
    
                docEl.style.fontSize = 100 * (clientWidth / width) + "px";
                docEl.style.width = "";
                docEl.style.margin = "";
            }
        };
    if (!doc.addEventListener) return; // 如果没有这个方法，中断函数
    win.addEventListener(resizeEvt, recalc, false); // 改变大小时调整一下
    doc.addEventListener("DOMContentLoaded", recalc, false); // 加载完成时调整
})(document, window);
// 使用时：1rem = 设计稿的宽度 / 100

<script>
    (function (doc, win) {
      
      
      let docEl = doc.documentElement, // 获取html
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        width = 750, // 设计稿宽，用时只需要修改这一处
        recalc = function () {
      
      
          const clientWidth = docEl.clientWidth; // 获取设备尺寸
          if (!clientWidth) return; // 如果没有值，回去
          if (clientWidth > width) {
      
      
            // 如果超过设计稿宽度，就给一个固定值
            docEl.style.fontSize = "100px";
          } else {
      
      
            docEl.style.fontSize = 100 * (clientWidth / width) + "px";
          }
        };
      if (!doc.addEventListener) return; // 如果没有这个方法，回去
      win.addEventListener(resizeEvt, recalc, false); // 改变大小时调整一下
      doc.addEventListener("DOMContentLoaded", recalc, false); // 加载完成时调整
    })(document, window);
    // 使用时：1rem = 设计稿的宽度 / 100
  </script>

Преимущества rem адаптивной верстки

• Хорошая совместимость
  • ios: поддерживается системами 6.1 и выше.
  • Android: поддерживаются версии 2.1 и выше
  • Поддержка большинства основных браузеров
• По сравнению с предыдущим статическим макетом и процентной схемой страница не будет деформироваться из-за масштабирования, а адаптивный эффект будет лучше.
• Объем расчета разработки невелик, а система отсчета едина.

Недостатки рем-адаптации макета

• Это не чистое решение для мобильной адаптации CSS. Необходимо ввести js-скрипт, встроить js-скрипт в голову, отслеживать изменение разрешения, чтобы динамически изменять размер шрифта корневого элемента. Существует определенная связь между стилем CSS. и js-код, и изменение должно быть Код размера шрифта помещается перед стилем CSS.

• Проблема с десятичными пикселями. Наименьшей единицей рендеринга браузера является пиксель. Элементы адаптируются в соответствии с шириной экрана. Десятичные пиксели могут появиться после расчета rem. Браузер округлит эти десятичные дроби и отобразит их как целые числа.

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

  То есть, если размер элемента составляет 0,625 пикселей, размер его рендеринга должен быть 1 пиксель, а пустое пространство 0,375 пикселей заполняется соседними элементами; аналогично, если размер элемента составляет 0,375 пикселей, размер его рендеринга должно быть 0, но оно будет занимать 0,375 пикселей пространства соседнего элемента. Приведёт к тому, что элементы размером менее 1 пикселя будут появляться и исчезать (решение: укажите минимальный пиксель преобразования, для пикселей меньшего размера не конвертируйте в rem или vw)

  Два элемента одинаковой ширины имеют разницу в 1 пиксель из-за разной ширины окружающих элементов.

  Квадрат одинаковой ширины и высоты имеет разную длину и ширину.

  border-radius: 50% Нарисованный круг не круглый.

• Проблема отклонения вертикального центрирования высоты строки в браузере Android. Обычно используемый метод вертикального центрирования — использование высоты строки. Этот метод не может быть полностью центрирован на устройствах Android. Лучшая рекомендация: использование центрирующего решения гибкой компоновки коробок может идеально решить эту проблему.

решение для адаптации rem Taobao

<script>!function(e,t){
      
      var n=t.documentElement,d=e.devicePixelRatio||1;function i(){
      
      var e=n.clientWidth/3.75;n.style.fontSize=e+"px"}if(function e(){
      
      t.body?t.body.style.fontSize="16px":t.addEventListener("DOMContentLoaded",e)}(),i(),e.addEventListener("resize",i),e.addEventListener("pageshow",function(e){
      
      e.persisted&&i()}),2<=d){
      
      var o=t.createElement("body"),a=t.createElement("div");a.style.border=".5px solid transparent",o.appendChild(a),n.appendChild(o),1===a.offsetHeight&&n.classList.add("hairlines"),n.removeChild(o)}}(window,document)</script>

Компоновка 1.4 vh/vw

принцип компоновки vh/vw

vh, vw — это в основном новые единицы длины в CSS3 для мобильной адаптации: в основном проценты относительно области просмотра.

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

• vw: 1vw равен 1% ширины области просмотра.

• vh: 1vh равен 1% высоты области просмотра.

• vmin: выберите наименьший между vw и vh.

• vmax: выберите самый большой между vw и vh

Метод расчета фактически аналогичен процентному, но у него есть еще одно преимущество: система отсчета не такая сложная, как процентная.

Преимущества компоновки vh/vw

• Решение для адаптации мобильного терминала на чистом CSS, никаких проблем с зависимостью от скриптов.
• По сравнению с rem, размер элемента определяется как кратный размеру шрифта корневого элемента. Логика понятна и проста. Единица просмотра зависит от размера области просмотра «1vw = 1/100 ширины области просмотра». Элемент ширина определяется на основе процента от размера области просмотра.

Недостатки компоновки vh/vw

• Существуют некоторые проблемы совместимости, версия Android ниже 4.4 не поддерживается.
• Преобразование px в vw не может быть полностью делимым, поэтому существует определенная разница в пикселях.

расчет компоновки vh/vw

100vw = 750 пикселей (пикселей дизайнерского рисунка)

0,13333333333333333333vw = 1 пиксель

/* 设计图中一个 48px*35px 大小的元素 */
box1{
    
    
    width:48px;
    height:35px;
}
/* 用 vh/vw 布局 */
box1{
    
    
    width:6.4vw;
    height:4.667vw;
}

Компоновка 1.5 рем+фв/вх

принцип компоновки rem+vw/vh

• Решение vw/vh может обеспечить адаптивную ширину и высоту, и логика ясна. Поскольку оно было поддержано поздно, существуют определенные проблемы совместимости. Объедините схему vw/vh со схемой rem и установите единицу измерения vw для корневого элемента, который изменяется в зависимости от области просмотра.

• Для черновика шириной 1080 пикселей установите размер корневого шрифта по умолчанию равным 100 пикселей, тогда 1 пиксель в черновике проекта будет соответствовать 100vw/1080 = 0,0925926vw и 1rem = 100 пикселей, так что вы можете получить 1rem = 9,256926vw.

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

практичность компоновки rem+vw/vh

• В качестве метода адаптации мобильной веб-страницы используется метод гибкой компоновки rem.В более позднем периоде при переходе с rem на vw необходимо лишь изменить метод расчета размера корневого элемента без какой-либо другой обработки.
• vw станет лучшим методом адаптации, который в настоящее время широко не используется из-за соображений совместимости. rem+vw/vh не имеет проблем совместимости с vw/vh и может быть переходным решением от rem к vw/vh.

адаптация макета rem+vw/vh

• 1 рем = 1 размер шрифта HTML
• Минимальный размер шрифта на веб-странице – 12 пикселей. Вы не можете установить шрифт размером менее 12 пикселей. Если вы установите шрифт меньше 12 пикселей, для него будет автоматически установлено значение 12.

преобразование макета rem+vw/vh

• Установите размер шрифта: 0,13333vw, затем 1rem = 1 пиксель (рисунок) (не рекомендуется).
• Установите размер шрифта: 5.3333vw, затем 1rem = 40 пикселей (рисунок)
• Установите размер шрифта: 13.333vw, затем 1rem = 100 пикселей (рисунок)

html{
    
    
    font-size:5.3333vw
}
.box1{
    
    
    width:1.2rem;
    height:0.875rem;
}
html{
    
    
    font-size:13.333vw
}
.box1{
    
    
    width:0.48rem;
    height:0.35rem;
}

• Как адаптация vw преобразует размер элемента? Используйте формулу: (размер элемента/размер конструкции) * 100vw, чтобы преобразовать размер элемента в размер единиц vw. Если взять в качестве примера обычно используемый размер черновика проекта 750 пикселей и предположить, что определенный размер шрифта черновика проекта составляет 40 пикселей, размер единицы измерения, преобразованный в vw, должен быть (40 / 750) * 100vw = 5,33333vw.

1.6 макет запроса rem+media

принцип компоновки запроса rem+media

• Основная реализация заключается в медиа-запросе и написании разных стилей для устройств с разными разрешениями для достижения адаптивного макета, который используется для решения проблем совместимости между различными устройствами и разными разрешениями, что обычно относится к большим различиям между ПК, планшетами и мобильными телефонами. разница в разрешении.
• Реализация не ограничивается конкретными решениями и обычно сочетает в себе гибкую компоновку + гибкую компоновку. Например, установите изображения @2x для телефонов с маленьким экраном и изображения @3x для телефонов с большим экраном.

Адаптационное решение Suning (rem+media query)

html {
    
    
    font-size: 50px
}

body {
    
    
    font-size: 24px
}

@media screen and (min-width:320px) {
    
    
    html {
    
    
        font-size: 21.33px
    }
    body {
    
    
        font-size: 12px
    }
}

@media screen and (min-width:360px) {
    
    
    html {
    
    
        font-size: 24px
    }
    body {
    
    
        font-size: 12px
    }
}

@media screen and (min-width:375px) {
    
    
    html {
    
    
        font-size: 25px
    }
    body {
    
    
        font-size: 12px
    }
}

@media screen and (min-width:384px) {
    
    
    html {
    
    
        font-size: 25.6px
    }
    body {
    
    
        font-size: 14px
    }
}

@media screen and (min-width:400px) {
    
    
    html {
    
    
        font-size: 26.67px
    }
    body {
    
    
        font-size: 14px
    }
}

@media screen and (min-width:414px) {
    
    
    html {
    
    
        font-size: 27.6px
    }
    body {
    
    
        font-size: 14px
    }
}

@media screen and (min-width:424px) {
    
    
    html {
    
    
        font-size: 28.27px
    }
    body {
    
    
        font-size: 14px
    }
}

@media screen and (min-width:480px) {
    
    
    html {
    
    
        font-size: 32px
    }
    body {
    
    
        font-size: 15.36px
    }
}

@media screen and (min-width:540px) {
    
    
    html {
    
    
        font-size: 36px
    }
    body {
    
    
        font-size: 17.28px
    }
}

@media screen and (min-width:720px) {
    
    
    html {
    
    
        font-size: 48px
    }
    body {
    
    
        font-size: 23.04px
    }
}

@media screen and (min-width:750px) {
    
    
    html {
    
    
        font-size: 50px
    }
    body {
    
    
        font-size: 24px
    }
}

Преимущества макета запроса rem+media

• Точно адаптируется к различным экранам и устройствам для достижения максимального удобства пользователя.
• Это самый удобный способ адаптироваться к некоторым страницам с компактным макетом и активными страницами.Другого способа нет.
• ПК, мобильный требуется только один набор кодов

Недостатки макета запроса rem+media

• Чтобы соответствовать достаточному количеству устройств и экранов, веб-страница требует нескольких дизайнерских решений, а рабочая нагрузка относительно велика.
• Определенное количество точек останова необходимо установить с помощью технологии медиазапросов. Страница до и после достижения определенной точки останова существенно меняется, и взаимодействие с пользователем становится не очень дружелюбным.
• На странице присутствует определенное количество «избыточного» кода.
• Самое фатальное то, что существует разрыв между методами взаимодействия ПК и мобильных устройств и поведением пользователей: требуется не только адаптация CSS, но даже метод взаимодействия может потребовать для адаптации двух наборов JS.

1.7 Краткое описание плана расположения мобильного терминала

• Прежде всего, необходимо прояснить одну вещь: не существует единого решения, которое идеально подходило бы для всех сценариев на мобильной стороне, и не каждое решение сейчас бесполезно.
• Наиболее рекомендуемое решение компоновки: гибкая компоновка блоков (если не слишком затруднительно использовать компоновку больших блоков, вы также можете использовать vw, vh или даже rem)
• У различных решений по адаптации мобильных веб-страниц, упомянутых выше, есть некоторые преимущества и недостатки.
• Некоторые отечественные интернет-сайты, просмотрев исходный код веб-страницы, обнаружили, что это может быть не однократное использование определенного решения, а комбинация нескольких решений.
• На странице настройки ширины элементов включают проценты и rem, а стили шрифта включают rem, em и фиксированный размер пикселей; когда ширина экрана слишком велика, он больше не будет масштабироваться, и также будут использоваться медиа-запросы. , и ответ будет: Дизайн может быть больше направлен на адаптацию между разными устройствами.
• Для адаптивного решения мобильных веб-страниц сейчас больше используется rem, постепенно развиваясь в сторону vw/vh, а rem+vw/vh — это переход к обратной совместимости vw/vh.
• Адаптивный дизайн — это адаптивный дизайн для устройств с разными разрешениями, в котором в качестве основного средства используются правила @media, тогда как адаптивный игнорирует @media и фокусируется на пропорциональном макете с целью адаптации к различным размерам окон браузера.

Мобильная обработка изображений

• Используйте относительные единицы при указании ширины изображения, чтобы предотвратить случайное переполнение области просмотра, например, ширина: 50%, установите ширину изображения равной 50% ширины содержащего элемента.
• Поскольку CSS позволяет содержимому переполнять контейнер, вам необходимо использовать max-width: 100%, чтобы изображения и другой контент не переполнялись.
• Распространенный способ поддерживать фиксированное соотношение сторон изображений на адаптивных страницах — использовать настройки заполнения.

rem, vw/vh, проценты и гибкое поле для общего макета

• Если контент плотный, рассмотрите возможность использования медиа-запросов для реализации небольших настроек полей (пикселей) различной ширины, таких как значки, шрифты, поля и отступы для контента в плотных областях.

  Таким образом, не будет никаких неприятных ощущений, таких как уменьшение или даже сжатие интервалов из-за адаптации.Фактически, у Taobao и JD.com теперь есть этот набор решений.

• Если содержимое неплотное, вы можете использовать rem, vw, vh для установки пикселей.

2 практических задания

• Реализуйте домашнюю страницу мобильного терминала Suning.com