Сводка по адаптации мобильного веб-терминала

внешний интерфейс регулярное выражение CSS PostCSS

1. Проблема с границей 1px

Предположительно, вы сталкивались с проблемой границ в 1px на собеседованиях или на работе. Неважно, если вы не знаете, а теперь давайте рассмотрим его (друзья, которые знают, могут пропустить и посмотреть вторую часть). Граница в 1 пиксель, как следует из названия, предназначена для рисования линии в 1 пиксель на переднем конце, а здесь 1 пиксель относится к размеру экрана в 1 пиксель. Итак, в чем разница между 1px на экране и 1px в css? Каждый физический пиксель (то есть 1 пиксель экрана) Наименьшая единица отображения изображения. 1 пиксель CSS — это базовая единица рендеринга в браузере. На обычном экране 1 пиксель соответствует 1 физическому пикселю. На экранах с увеличением 2x и 3 x 1 пиксель соответствует 2 физическим пикселям и 3 физическим пикселям соответственно. . Это как эксперимент Миллиметровая бумага, если на бумаге есть 10 маленьких сеток (эквивалентно 10 физическим пикселям), и вы используете 1 сетку для представления единицы вашей собственной системы координат при рисовании, то окончательный график, который вы сделаете, будет занимать площадь вся миллиметровка.немного, Если одну единицу системы координат представить 10 мелкими сетками, то возможно, что на всю миллиметровку удастся нарисовать только часть изображения, но при этом сохранится больше деталей. В случае 2 линия той же единичной длины будет в 10 раз длиннее, чем в случае 1. Браузер под экраном с большим увеличением То же самое и с рендерингом: линии отрисовываются в два раза толще на экране с увеличением 2x, а линии отрисовываются в три раза толще на экране с увеличением 3x.

2. Экранизация разных размеров

Экранная адаптация мобильного терминала должна учитывать не только различные размеры, но и dpr (соотношение пикселей экрана, которое можно понимать как каждоеpxСколько физических пикселей используется для отображения), dpr=2 это 2 раза больше экрана. Это также устройство с шириной 350px.Обычный экран выглядит нормально, а экран 2x выглядит очень линиями. Толстый, вы можете использовать некоторые хаки, такие как масштабирование преобразования, создание теней для имитации границ, с этим есть некоторые проблемы, если вам нужно рисовать линии в 1 пиксель глобально? Нам просто нужно убедиться, что 1px всегда занимает только 1 физический пиксель. Это использует область просмотра метатега для масштабирования глобального представления. Обычно это выглядит так:

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

Установите начальный масштаб = 0,5 для экрана 2x и начальный масштаб = 0,33 для экрана 3x, поэтому нам также нужно передать скрипт перед рендерингом веб-страницы.window.devicePixelRatioПолучите dpr, затем установите начальный масштаб на 1/dpr.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" language="zh-cn-hans">
        <script>
            (function(){
                function resetViewPort (){
                    var viewport = document.querySelector('meta[name = viewport]');
                    if(!viewport){
                        viewport = document.createElement("meta");
                        var head = document.querySelector("head");
                        head.insertBefore(viewport,head.firstChild);
                    }
                    var ratio = window.devicePixelRatio||1;
                    var content = 'width=device-width,initial-scale='+ Math.round(100/ratio) / 100 +',maximum-scale=1,user-scalable=no';
                    viewport.setAttribute("content",content);
                };
                window.addEventListener('DOMContentLoaded',resetViewPort);
            })()
        </script>
    </head>
    <body>
    </body>
</html>

На данный момент 1 пиксель под всеми экранами соответствует 1 физическому пикселю, и теперь нам нужно только учитывать разные размеры экрана. Но теперь возникает проблема, потому что длина px не такая, как раньше, если мы все еще используем px для описания элемента, он определенно станет меньше, поэтому нам нужно Выразите элемент в другой единице. Теперь давайте подумаем, какие единицы измерения есть в css помимо px?

  • %

  • em,rem

  • vw

  • ...

% обычно относится к родительскому элементу.Когда есть несколько уровней вложенности, это очень сложно и трудно определить.Точно так же em также имеет этот недостаток. увидеть сноваrem, это всегда относительно размера шрифта корневого элемента, корневой элемент уникален, пока мы гарантируем, что корневой элемент находится на разных экранах Размер шрифта элемента пропорционален ширине экрана, и можно получить такой же эффект отображения. Это хороший метод, просто добавьте несколько строк кода в приведенный выше скрипт, и совместимость с браузером также очень хорошая.Многие статьи также представляют это решение. Однако сегодня он не наш главный герой. Давайте еще раз посмотрим на vw. 1vw означает 1/100 ширины экрана. Элемент шириной 30vw занимает 30% ширины экрана на устройстве A и 30% ширины экрана на устройстве B. Это не то, что нам нужно. . ? Давайте посмотрим на vwсовместимость,Как можно заметитьvw几乎完全兼容. На самом деле, font-size + rem — это смоделированный vw, почему бы нам не использовать его напрямую?

3. Плагин автоматического преобразования

Мы обычно держим эскиз дизайна и пишем размер согласно аннотации. Метка вообще в px, а сейчас пишется в vw, и требуется конвертация. Мы позволили подключаемому модулю сделать это преобразование, но похоже, что мы не нашли соответствующий подключаемый модуль postcss, поэтому я написал его сам:postcss-unify, Код очень простой и состоит всего из строк 20. Он должен использовать обычное сопоставление, а затем заменить. Если вам интересно, вы также можете сделать его самостоятельно. Вот краткий рассказ о postcss, который может конвертировать css в объекты js для нашего удобства. операцию, а затем преобразовать результат в код css, вздесьУзнайте больше (как писать плагины также доступно по ссылке).

4. Другое

Double Eleven закончился, я все еще один!
Эта статья ссылается на многие статьи и сочетает в себе практическое исследование.Что не так или лучше, приветствуется.
~~ Ты видел меня повсюду, почему бы тебе не сделать мне комплимент?

Категории