Подробное объяснение метода адаптации макета страницы HTML5.

Основными методами являются:

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

Упрощенная общая версия:

 !(function(win, doc){ function setFontSize() { // Получаем ширину окна // Вот как Zepto реализует $(window).width() var winWidth = window.innerWidth; // doc.documentElement.style. fontSize = (winWidth / 640) * 100 + 'px' // Для ограничения ширины выше 640 требуется, чтобы CSS соответствовал размеру var = (winWidth / 640) * 100; doc.documentElement.style.fontSize = (размер < 100 ? размер: 100) + 'px'; } var evt = 'onorientationchange' в win? 'orientationchange': 'resize'; таймер = null; win.addEventListener(evt, function () {clearTimeout(timer); таймер = setTimeout(setFontSize, 300); false); win.addEventListener(pageshow, function(e) { if (e.persisted) {clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); //Инициализируем setFontSize();}(окно, документ));

Очень точная версия:

 (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 && factSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / actualSize; docEl.style.fontSize = remScaled + 'px'; } } var timer; function dbcRefresh() {clearTimeout(timer); = setTimeout(setFontSize, 100 } //Обновление окна динамически меняет размер шрифта WIN.addEventListener('resize', dbcRefresh, false); //Вычисляем один раз, когда страница отображается WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false) ; setFontSize ();})(window)//Для страниц активности H5 требуется соотношение ширины и высоты, а также функция AdjustWarp(warpId = '#warp') { const $win = $(window); const height = $win.height(); let width = $win.width(); // Рассмотрим панель навигации if (width/height < 360/600); ) { return; } width = Math.ceil(height * 360/640); $(warpId).css({ высота, ширина, позиция: 'относительный', сверху: 0, слева: 'авто', маржа: '0 авто' }); // Пересчитать rem window.setFontSize(width);}

Простой в использовании, но ему не хватает гибкости. Посмотрите демо-версию. Вы поймете.

 @media screen и ( min-width: 320px){html{font-size:50px}}@media screen и ( min-width: 360px){html{font-size:56.25px}}@media screen и ( min- ширина: 375 пикселей){html{font-size:58.59375px}}@media screen и ( минимальная ширина: 384px){html{font-size:60px}}@media screen и (min-width: 400px){html{font-size:62.5px}}@media screen и (min-width: 414px){html{font- размер: 64,6875 пикселей}} @media screen и (минимальная ширина: 424 пикселей){html{font-size:66.25px}}@media screen и (min-width: 480px){html{font-size:75px}}@media screen и (min-width: 540px){html{font- размер: 84,375 пикселей}} @media screen и (минимальная ширина: 640 пикселей){html{font-size:100px}}

Его можно соответствующим образом изменить в соответствии с потребностями личного проекта и дизайном продукта. Вышеупомянутый метод написания демо-версии не является уникальным и фиксированным.

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