13.12.2024 07:26
AlexeyRybakov 2 502 Источник

В современной веб-разработке создание H5-страниц, которые корректно отображаются на разных экранах, становится все более важной задачей. В крупных компаниях, таких как Alibaba, в преддверии крупных акций вроде «Китайской Черной пятницы» (12.12), разработчики создают новые H5-страницы. Такие страницы должны быть визуально привлекательными и обеспечивать адаптацию под множество устройств без ошибок.

Для выполнения задачи требуется:

  1. Использовать предоставленные дизайнером макеты с точными размерами и стилями.

  2. Применять HTML, CSS и JavaScript для реализации адаптивного H5-интерфейса.

  3. Особое внимание уделить стратегиям адаптации под мобильные устройства, включая использование единицы измерения rem для масштабирования.

1. Мост между дизайн-макетами и технической реализацией

Получив макет с пометками от дизайнера, разработчику важно не просто «скопировать» стили, а превратить их в код, соответствующий веб-стандартам. Это включает:

  • Создание структуры HTML: правильный выбор тегов и их иерархии.

  • Применение CSS: настройка стилей для макета.

  • Логика на JavaScript: обеспечение интерактивности.

Что важно учитывать:

  • Макет с аннотациями — основа для работы фронтенд-разработчика. Он содержит ключевые данные: размеры, цвета, шрифты, расположение элементов.

  • Финальный продукт — это набор файлов, включая HTML-документ, CSS-таблицы стилей и JavaScript-скрипты, которые должны работать как автономная система.

2. Документный поток и блочная модель

Для правильного расположения элементов важно понимать принципы документного потока и блочной модели (box model). Например:

  • Блочные элементы (block elements) занимают всю ширину контейнера.

  • Инлайновые элементы (inline elements) располагаются в одной строке.
    Через свойства, такие как display, можно управлять поведением элементов: например, изменять блочные элементы на инлайновые (display: inline-block).

3. Стратегии адаптации для мобильных устройств

Использование относительных единиц измерения (rem)

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

Ограничения абсолютных единиц (px)

Пиксель (px) — это фиксированная единица измерения, которая не адаптируется под размер экрана или разрешение. Например, в дизайне шириной 375px элементы, заданные в пикселях, могут быть слишком крупными для маленьких экранов или, наоборот, слишком мелкими для больших дисплеев.

Пример:

<body>
  <div style="width:100px;height:50px;background-color:red;"></div>
  <div style="width:100px;height:50px;background-color:green;"></div>
</body>

В приведенном примере красный квадрат, заданный в фиксированных размерах 100px на 50px, не изменяется в зависимости от размеров экрана устройства, так как px — это абсолютная единица. Это делает его неподходящим для адаптивного дизайна.

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

Преимущества использования относительных единиц rem

rem — это относительная единица измерения, основанная на размере шрифта корневого элемента (<html>). Все элементы, стилизованные с использованием rem, будут изменяться пропорционально значению font-size в корневом элементе.

Почему rem идеально подходит для адаптивного дизайна

  • Динамическое масштабирование: При изменении значения font-size в <html>, размеры всех элементов, использующих rem, автоматически подстраиваются.

  • Единообразие: Упрощает адаптацию под разные размеры экранов, обеспечивая согласованное восприятие дизайна.

Пример использования rem

Допустим, у нас есть дизайн шириной 375px, который необходимо перевести в rem. Установим font-size для <html> равным 37.5px. Тогда:

  • 1rem = 37.5px.

  • Если элемент в макете имеет ширину 187.5px, то его размер в rem будет равен:

\text{Ширина элемента в rem} = \frac{187.5}{37.5} = 5 \, \text{rem}

Пример реализации:

<html lang="en" style="font-size:37.5px;">
  <body>
    <div style="width:5rem;height:2rem;background-color:red;"></div>
    <div style="width:5rem;height:2rem;background-color:green;"></div>
  </body>
</html>

Размеры квадрата (width и height) теперь указаны в rem, что позволяет масштабировать их при изменении значения font-size в <html>.

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

В этом примере ширина и высота красного и зеленого квадратиков будут пропорционально масштабироваться в зависимости от значения font-size элемента <html>. Например, когда ширина экрана увеличится до 1024px, значение font-size для элемента <html> также будет увеличиваться до 102.4px. В таком случае фактическая ширина элемента составит:

5 \, \text{rem} \times 102.4 \, \text{px} = 512 \, \text{px}

а не исходные 187,5 пикселей.

Динамическое масштабирование <html> через изменение font-size

В примере, где красный и зеленый квадраты заданы в rem, их размеры динамически изменяются в зависимости от значения font-size корневого элемента <html>.

Пример:

Изначальное значение: При ширине экрана 750px, font-size корневого элемента установлено в 75px. Таким образом:

5 \, \text{rem} = 5 \times 75 \, \text{px} = 375 \, \text{px}

При увеличении экрана до 1024px: Значение font-size автоматически пересчитывается (102.4px), и новый размер квадрата:

5 \, \text{rem} = 5 \times 102.4 \, \text{px} = 512 \, \text{px}

Динамическое изменение font-size с помощью JavaScript

Чтобы пропорции страницы сохранялись на любых экранах, используется JavaScript для вычисления и установки значения font-size корневого элемента. Пример реализации:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Али Double 11</title>
  <script>
    (function() {
      function calc() {
        const w = document.documentElement.clientWidth; // Ширина окна
        console.log(w); // Вывод текущей ширины для проверки
        document.documentElement.style.fontSize = 75 * (w / 750) + 'px'; // Расчет font-size
      }
      calc(); // Инициализация расчета при загрузке страницы
      window.onresize = function() {
        calc(); // Пересчет при изменении размера окна
      };
    })();
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div>
    <div style="width:5rem;height:2rem;background-color:red;"></div>
    <div style="font-size:0;">
      <div style="width:5rem;height:2rem;background-color:green;display:inline-block;font-size:20px;color:white;vertical-align: top;"></div>
    </div>
  </div>
</body>
</html>

Объяснение кода:

  1. Функция calc():

    • Получает ширину окна через document.documentElement.clientWidth.

    • Устанавливает font-size корневого элемента (<html>) в зависимости от текущей ширины окна. Коэффициент 75 * (w / 750) означает, что при ширине окна 750px font-size будет равен 75px.

  2. Событие onresize:

    • Каждый раз при изменении размера окна вызывается функция calc() для перерасчета font-size. Это позволяет адаптировать элементы к текущему размеру экрана.

  3. Пример использования:

    • Красный и зеленый блоки указаны в rem. Их размеры пересчитываются в зависимости от текущего значения font-size и изменяются пропорционально ширине экрана.

Адаптация при изменении ориентации экрана

При повороте устройства (например, при переходе из портретного в альбомный режим) элементы автоматически подстраиваются под новую ширину экрана благодаря функции пересчета в window.onresize. Это гарантирует корректное отображение интерфейса в любых условиях.

Использование этого подхода позволяет создавать универсальные адаптивные страницы, которые одинаково хорошо смотрятся как на смартфонах, так и на планшетах или мониторах.

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

Объединяя знания HTML, CSS и JavaScript, разработчики могут эффективно преобразовывать дизайнерские макеты в полнофункциональные H5-страницы. Применение rem не только упрощает процесс адаптации под мобильные устройства, но и гарантирует высокое качество отображения на различных устройствах.

Комментарии (2)


  1. simple-mortal
    13.12.2024 07:33
    #27668974

    А что такое H5-страница? Она отличается чем-то от просто страницы? И не до конца понял, а где же решение проблемы

    выдерживать нагрузку большого количества пользователей

    Или что-то другое имелось в виду? Не серверная оптимизация, или политика кеширования?


    1. isumix
      13.12.2024 07:33
      #27672662

      Может быть H5 автор называет HTML5 хотя я тоже такую формулировку впервые слышу.