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

Отзывчивый дизайн

Пожалуйста, обновите эту статьюкликните сюда

Эта статья была впервые опубликована вWoohoo. Lu Dawei.com/post/Горячий ублюдок…

Запросы СМИ @media

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

На рисунке ниже показано использование@mediaНа той же странице для достижения двух концов мобильного телефона, IPad конец 3, расположение четырех ПК.

layout

Давайте проанализируем, как реализовать приведенную выше демонстрацию.

<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.grid {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 50%;
}

@media (min-width: 576px) {
  .item {
    width: 33.333%;
  }
}

@media (min-width: 1024px) {
  .item {
    width: 25%;
  }
}

Делим устройство на три секции по ширине устройства, а именно:

  • 小于576pxМобильный диапазон
  • 576px~1024pxИнтервал плиты
  • 大于1024pxАссортимент ПК

Стиль по умолчанию написан для мобильного терминала, что сокращает правила сопоставления и ускоряет синтаксический анализ мобильного терминала. Когда ширина устройства больше 576 пикселей, она соответствует@media (min-width: 576px),В настоящее времяwidth: 33.333%;будет оригинал50%Перезаписано, отображается в виде 3 столбцов. Когда ширина устройства больше 1024 пикселей, она соответствует@media (min-width: 1024px),В настоящее времяwidth: 25%;перезаписать оригинал33.333%, отображается в виде 4 столбцов.

При рациональном размещении структуры DOM эффект просмотра на разных устройствах может быть совершенно разным. СотрудничатьflexмакетorderАтрибуты, перестановка позиций между DOM стала проще.

REM

Мы решили проблему размещения на разных концах, используя три точки останова, но это только первый шаг. Мы по-прежнему используем px в качестве единицы.Дизайнер дал нам проект дизайна iPhone6, кнопку шириной 80px, которая может быть написана так на iPhone6. Что делать, если в iPhone5s не хватает места и возникает разрыв строки, а iPhone6 ​​Plus остается пустым? В это время будет вызван наш большой убийца Рем.

REM - относительное устройство, рассчитанное по размеру шрифта корневого элемента HTML.元素实际尺寸 = 元素 rem 值 x html 的 font-size 值. То есть, когда размер шрифта html установлен на 50 пикселей, фактический размер элемента в 2rem составляет 100 пикселей.

Наши дизайнеры обычно используют 2x iPhone6 ​​в качестве эскиза. Ширина эскиза дизайна iPhone6 ​​составляет750px, соответствует реальному размеру350px. Чтобы облегчить преобразование, мы устанавливаем размер шрифта html равным50px,Фактический размер100px = 2rem. Этот2remТочно соответствует эскизному проекту200Сдвиг на два десятичных знака влево делает преобразование очень удобным.

Я понимаю, что вы сказали, но какое это имеет отношение к адаптации 5s и 6p? ?

Конечно, это имеет значение, мы можем сделать размер шрифта html пропорционально масштабируемым на основе iPhone6, чтобы можно было добиться адаптации к 5s и 6p. Взгляните на кусок кода:

var clientWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = (clientWidth / 750) * 100 + "px";

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

Давайте посмотрим на реальные рендеры:

layout2

Объединить @media rem

Комбинируя два пункта, упомянутых ранее, код выглядит следующим образом:

var clientWidth = document.documentElement.clientWidth;
if (clientWidth < 575) {
  document.documentElement.style.fontSize = (clientWidth / 750) * 100 + "px";
} else if (clientWidth < 1024) {
  // 竖版 iPad 的 2x 尺寸
  document.documentElement.style.fontSize = (clientWidth / 1536) * 100 + "px";
} else {
  document.documentElement.style.fontSize = "50px";
}

Наконец достигнуто:

  • 小于576pxМобильный диапазон, пропорционально масштабированный iPhone6, макет в 2 столбца
  • 576px~1024pxПлощадь планшета, пропорциональная вертикали iPad, макет в 3 столбца
  • 大于1024pxДиапазон на стороне ПК, без масштабирования. макет в 4 колонки

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

Категории