Cet article présente principalement l'explication détaillée de la méthode d'adaptation de la mise en page rem des pages HTML5. L'éditeur pense que c'est assez bon. Maintenant, je vais la partager avec vous et vous donner une référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Solution d'adaptation de mise en page rem
La méthode principale est :
Calcul dynamique basé sur le rapport entre l'avant-projet et la largeur de l'appareil Et définissez la taille de la police de la balise racine HTML
En CSS, la largeur, la hauteur, la position relative, etc. des éléments du brouillon de conception sont convertis en valeurs en unités rem selon la même proportion. ;
La police dans le brouillon de conception utilise px comme unité et est légèrement ajustée via les requêtes multimédias.
1 Définir dynamiquement la taille de la police de la balise HTML
Version universelle simplifiée :
!(function(win, doc){ function setFontSize() { // 获取window 宽度 // zepto实现 $(window).width()就是这么干的 var winWidth = window.innerWidth; // doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ; // 640宽度以上进行限制 需要css进行配合 var size = (winWidth / 640) * 100; doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ; } var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize'; var timer = null; win.addEventListener(evt, function () { clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { clearTimeout(timer); timer = setTimeout(setFontSize, 300); } }, false); // 初始化 setFontSize(); }(window, document));
Configuration élevée et version précise :
(function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // 获取当前窗口的宽度 var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect().width; // 大于 1080px 按 1080 if (width > 1080) { width = 1080; } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; // 误差、兼容性处理 var actualSize = win.getComputedStyle && parseFloat(win.getComputedStyle(docEl)["font-size"]); if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / actualSize; docEl.style.fontSize = remScaled + 'px'; } } var timer; function dbcRefresh() { clearTimeout(timer); timer = setTimeout(setFontSize, 100); } //窗口更新动态改变 font-size WIN.addEventListener('resize', dbcRefresh, false); //页面显示时计算一次 WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false); setFontSize(); })(window) //对H5活动推过页面,宽高比例有所要求,可适当调整 function 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({ height, width, postion: 'relative', top: 0, left: 'auto', margin: '0 auto' }); // 重新计算 rem window.setFontSize(width); }
2 Définition de rem via une requête multimédia CSS3
Facile à utilisation Veuillez consulter la démo pour plus de flexibilité. Vous saurez que
@media screen and ( min-width: 320px){html{font-size:50px}} @media screen and ( min-width: 360px){html{font-size:56.25px}} @media screen and ( min-width: 375px){html{font-size:58.59375px}} @media screen and ( min-width: 384px){html{font-size:60px}} @media screen and ( min-width: 400px){html{font-size:62.5px}} @media screen and ( min-width: 414px){html{font-size:64.6875px}} @media screen and ( min-width: 424px){html{font-size:66.25px}} @media screen and ( min-width: 480px){html{font-size:75px}} @media screen and ( min-width: 540px){html{font-size:84.375px}} @media screen and ( min-width: 640px){html{font-size:100px}}
peut être modifié de manière appropriée en fonction des besoins personnels du projet et de la conception du produit. unique et fixe.
Recommandations associées :
Javascript utilise rem pour le partage d'exemples de développement réactif
Méthode d'implémentation de deux mises en page rem mobiles
Exemple pour expliquer js pour réaliser le calcul automatique de correspondance rem taille de police
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!