Подробное объяснение метода адаптации макета мобильного REM для страницы активности H5.

Как восстановить макет после получения эскиза?

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

На мобильной стороне этой цели можно достичь путем масштабирования соотношения размеров страниц через область просмотра.

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

 (function () { var docEl = document.documentElement; var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent); function setScale( ) { var pageScale = 1; если (window.top !== окно) { return pageScale } var width =; docEl.clientWidth || var height = docEl.clientHeight || 640; if (width/height >= 360/640) { // Приоритет высоты pageScale = height/640; else { pageScale = width/360 } var; content = 'width=' + 360 + ', начальный масштаб =' + pageScale + ', max-scale =' + pageScale + ', user-scalable = no'; document.getElementById('viewport').setAttribute('content', content); window.pageScale = pageScale } if (isMobile) { setScale(); ; } else { docEl.className += 'pc' }})();

Это решение было использовано в дизайне нашей страницы активности H5 в прошлом году.

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

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

Проще говоря, метод следующий:

1. Динамически рассчитывать и устанавливать размер шрифта корневого тега HTML в соответствии с соотношением эскиза дизайна и ширины устройства;
2. В css ширина, высота, взаимное расположение и т. д. элементов чертежа проекта преобразуются в значения в бэрах по той же пропорции;
3. Шрифты в проекте дизайна используют пиксели в качестве единицы измерения и слегка корректируются с помощью медиа-запросов.

Приведем пример для иллюстрации.

Первая проблема — динамический расчет размера шрифта html-тегов. Это зависит от того, как согласован коэффициент преобразования. Возьмем в качестве примера десять равных частей ширины страницы, ссылка на основной код:

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // Получаем ширину текущего окна var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( ). width; // Больше 1080 пикселей, нажмите 1080, если (ширина >). 1080) { width = 1080; } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; // Обработка ошибок и совместимости на некоторых моделях var actualSize = win .getComputedStyle && parseFloat(win.getComputedStyle(docEl)[размер шрифта]); if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / actualSize; docEl.style.fontSize = remScaled + 'px'; } } // Функция регулирования функции dbcRefresh() {clearTimeout (таймер); таймер = setTimeout (setFontSize, 100); //Обновления окна динамически изменяют размер шрифта WIN.addEventListener('resize', dbcRefresh, false //Вычисляем один раз при отображении страницы WIN.addEventListener('pageshow', function(e) { if (e.persisted); { dbcRefresh () } }, false);

Кроме того, для полноэкранных страниц активности H5 существуют требования к соотношению сторон, и на данном этапе необходимо внести коррективы. Вы можете сделать это следующим образом:

 functionjustWarp(warpId = '#warp') { // if (window.isMobile) return; const $win = $(window); const height = $win.height(); let width = $win.width(); // Рассмотрим панель навигации if (ширина/высота < 360/600) { return } width = Math.ceil(height * 360/640); $(warpId).css({ height, width, postion: 'relative', top: 0, left: 'auto', Margin: '0 auto' }); // Пересчитать rem window.setFontSize(width);}

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

Вторая проблема — значение размера элемента.

Взяв в качестве примера ширину черновика дизайна 1080 пикселей, мы делим ширину на 10 равных частей для удобства преобразования, тогда 1rem = 1080/10 = 108 пикселей. Метод преобразования:

 const px2rem = function(px, rem = 108) { let remVal = parseFloat(px) / rem; if (typeof px === string && px.match(/px$/)) { remVal += 'rem' } вернуть ремВал;}

Например, в черновике дизайна есть изображение размером 460x210 и относительным положением страницы сверху: 321px слева: 70;. В соответствии с описанным выше методом преобразования окончательный стиль CSS элемента должен быть следующим:

 .img_demo {позиция: абсолютный; размер фона: обложка; фоновое изображение: URL ('demo.png'); сверху: 2,97222рем; слева: 0,64814рем; высота: 1,94444рем;}

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

С помощью инструмента предварительной обработки less/sass нам нужно только установить метод миксинов, а затем установить значение в соответствии с фактическим размером черновика проекта. Если взять в качестве примера less, ссылка на миксины выглядит следующим образом:

 // px в rem.px2rem(@px, @attr: 'width', @rem: 108rem) { @{attr}: (@px / @rem);}.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) { .px2rem(@top, top, @rem); .px2rem(@left, left, @rem); .px2rem(@width, width, @rem); .px2rem(@height, height, @rem);}

Для элемента из предыдущего примера стиль css можно записать так:

 .img_demo {позиция: абсолютный; размер фона: обложка; фоновое изображение: url('demo.png'); .px2remTLWH(321, 70, 460, 210);}

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

Масштабирование шрифтов с использованием rem пропорций вызовет проблемы с отображением. Вам нужно только использовать медиа-запросы, чтобы установить несколько размеров.

Пример ссылки:

 // Адаптивный шрифт @media screen and (max-width: 321px) { body { font-size: 13px }}@media screen and (min-width: 321px) and (max-width: 400px) { body { font - размер: 14 пикселей }} @media screen и (минимальная ширина: 400 пикселей) { body { размер шрифта: 16 пикселей }}

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.