Легко осваивайте распространенные решения для мобильной веб-разработки [адаптация размера]

Данная статья в основном рассчитана на читателей начинающих в мобильной веб разработке.Автор тоже новичок.В статье много неуместных слов.Надеюсь читатели меня поправят.

предисловие

С самого начала разработки веб-приложений и до сих пор у меня всегда было смутное представление об адаптации размера мобильного терминала.Можно сказать, что «медиа-запрос», «растровая верстка», «потоковая верстка» и другие технические термины и методы реализации, но каждый раз, когда вы сами занимаетесь разработкой веб-приложений, продукты, которые вы делаете, всегда неудовлетворительны, например, вiPhone5На экране появляется переполнение текста, а скорректированное положение макета оказывается очень неправильным на некоторых мобильных телефонах небольшого размера, либо закрывает другие элементы, либо переносит строки.

Если это было раньше, я сделал это:

Продолжайте писать медиа-запросы для совместимости, пока PM или QA не будут удовлетворены.

У этого метода есть несколько проблем:

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

Я думал об этом, почему это появляетсяЛечите симптомы, но не причинуСлучай:

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

Итак, существует ли такая вещь, как`一劳永逸`,`全尺寸支持`,`不用动脑子算`Как насчет решения по адаптации размера мобильного терминала?

** Ответ, конечно, да. **Автор объединяет несколько популярных блогов, которые я прочитал, и обобщает некоторые из наиболее полезных моментов, надеясь, что читатели смогут быстрее освоить и использовать этот метод «раз и навсегда». Вещи, которые могут быть ленивыми, должны быть ленивыми. 🐷 (На рисунке показаны основные темы блога, включая гибкий репозиторий github)

Эффект, которого мы хотим добиться

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

что такое рем

Вкратце в одном предложении:если<html>стиль задается на этикеткеfont-size:16px,Так1rem = 16px. так:

Сотрудничество с пользовательским интерфейсом

В первую очередь нужно замолвить словечко мисс Уи:

"При маркировке элементов, пожалуйста, следуйте750px * 1334pxпреобладать. "

Затем вы получите карту аннотаций, подобную этой:

[Ядро] Динамический расчет + рем

На данный момент мы все еще не решили основную проблему:

Вы должны конвертировать px в rem самостоятельно. (Рядом может быть калькулятор)
Подходит в полный размер.

Далее самая основная ссылка.Автор восстанавливает всем процесс расчета через пошаговую диаграмму.

Шаг 1: Предположим, есть три мобильных телефона разной длины и ширины.

Шаг 2: Разделите ширину мобильного телефона на 10 частей, тогда ширина каждой части трех вышеуказанных мобильных телефонов равна35px/36px/37px. и воля<html>добавить разные тегиfont-sizeнастраивать.

То есть: одна копия 35px/36px/37px соответственно.

Шаг 3: Рассчитайте соответствующий rem в соответствии с картой аннотаций px пользовательского интерфейса:

Шаг 4: rem будет преобразован в разные размеры пикселей и представлен на разных мобильных телефонах: (ps: результат деления на картинке неверен)

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

Код

Разделите ширину мобильного телефона на 10 частей, тогда ширина каждой части трех вышеуказанных мобильных телефонов равна35px/36px/37px. и воля<html>добавить разные тегиfont-sizeнастраивать.

Рассчитать текущую ширину экрана динамически через JavaScript, разрезать ее на 10 частей и<html>изfontSizeУстановить как1份单位宽度.

document.addEventListener('DOMContentLoaded', function(e) {
    document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
}, false);

Событие DOMContentLoaded запускается, когда исходный HTML-документ полностью загружен и проанализирован, не дожидаясь завершения загрузки таблиц стилей, изображений и подфреймов. Другое событие load следует использовать только для обнаружения полностью загруженной страницы.MDN::DOMContentLoaded

Рассчитайте соответствующий rem в соответствии с картой аннотаций px пользовательского интерфейса.

Этот шаг требует использованияSassопределитьpx2remвспомогательная функция:

// utils.scss
@function px2rem($px){
    $rem : 75px; // '750/10':分成10份
    @return ($px/$rem) + rem;
}

// foo.scss

.box1 {
 	width: px2rem(320px); // '(320/750) * 10 = 4.266rem'
 }

Таким образом, мыstyleSheetдействительно действуетheight: 4.266rem,и1remСколькоpxприведенный выше код JavaScript в соответствии с различнымиwindow.innerWidthРассчитывается заранее. Это обеспечивает автоматическую адаптацию.

Если вы ненавидите писатьpx2rem()Также хлопотно, тогда вы можете определить имя функции проще.

Неизбежный viewport и dpr

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

Во-первых, следует различать два понятия:

пиксели устройства
CSS пикселей

есть такая сцена

Вышел из строя фронтенд-инженер

.box {
    width: 100px;
    height:100px;
}

В этот момент он имеет в видуboxФактическая длина и ширина нашего экрана100px, в его воображении такая картина:

После запуска проекта пользователь «плохо» использовал функцию увеличительного стекла, чтобы удвоить длину и ширину, и теперь это выглядит так:

Вы обнаружите, что устройству требуется длина и ширина 200 пикселей для отображения длины и ширины 100 пикселей, определенных в CSS, а отношение пикселей устройства к пикселям стиля равно dpr, то есть соотношению пикселей устройства., если у вас остались вопросы по концепции, заглянитеАнатомия окна просмотра.

Мы все знаем экран Retina (экран сетчатки), причина, по которой он выглядит таким высоким, заключается в том, что устройство Apple тратит два пикселя на рендеринг объекта в один пиксель, поэтому он должен выглядеть более изысканно.

Итак, если мы нацелимсяdpr=1написаноrem2px(100px), затем вdpr=2Устройство будет выглядеть как элемент, увеличенный в 2 раза.

Затем, если мы можем запросить текущее устройствоdprи выполните соответствующее масштабирование, чтобы решить эту проблему.

Например: некоторые устройства Androiddpr=1, но когда пользовательский интерфейс создает карту аннотаций, она основывается наdpr=2сделать это, как мы сказали выше750px * 1334px. напрямую750px * 1334pxНаписанный элемент будет увеличен в два раза,тогда мы делаем страницу в два раза меньше, как это контролировать?

с окном просмотра

Короче говоря, здесь мы используемviewportзаключается в управлении масштабированием экрана.

var dpr = window.devicePixelRatio;
meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no'); 
// 帮助理解 如果dpr=2，说明写的100px渲染成了200px，所以需要缩小至1/2，即1/dpr

Также стоит упомянуть, что пользовательский интерфейс обычно начинается с750px * 1334pxДизайн в соответствии со стандартом, потому что это делает проект дизайна более изысканным.Например, мы написалиrem2px(375px), затем он будет преобразован в мобильный телефон с шириной устройства в пикселях 390 пикселей и dpr = 3 с помощью следующего процесса.

rem2px(375px) ----> 5rem
5rem -----> 195px (样式pixels)
样式195px------> На данный момент кажется (имея в виду пиксели устройства), что есть195*3 = 585pxдлина
设置dpr=1/3-------> На данный момент это выглядит только195px

Таким образом, мы завершаемdprРазмерная адаптация.

покажи мне код:

<script>
  var dpr = window.devicePixelRatio;
  var meta = document.createElement('meta');

  // dpr
  meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no'); 
  document.getElementsByTagName('head')[0].appendChild(meta);

  // rem
  document.addEventListener('DOMContentLoaded', function (e) {
    document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
  }, false);
</script>

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

One More Thing

В процессе написания этого блога я столкнулся со следующими вопросами:rem布局和百分比布局感觉差距不大啊，因为在写rem的时候是基于把宽度切为10份后再写的，就像是1rem = 10% = 10vwТакой же. Это заставило меня на некоторое время подумать, что я мог бы использовать процентные макеты. Позже было выяснено, что если есть блочная вложенность (таких сценариев слишком много), то есть проблема с процентной раскладкой, потому что система отсчета своего процента выбирает родительский элемент, поэтому если мы определим его в дочернем коробка10%ширина, ссылаясь на父盒子вместо того, что мы хотим для всегоwindow.innerWidthиз10%. иvwСопровождаемость кода не так хороша, как в приведенной выше схеме, и совместимость неremХорошо (разрыв не слишком большой).

Если вы хотите узнать больше о раскладке для ПК или мобильных устройств, см.参考资源&鸣谢тарелка.