Explication détaillée de la méthode d'adaptation de la disposition du REM mobile pour la page d'activité H5

Après avoir obtenu le brouillon de conception, comment restaurer la mise en page ?

Si vous avez uniquement besoin de réaliser une conception réactive non exacte, utiliser des requêtes multimédias pour y parvenir est acceptable. S'il est nécessaire de restaurer avec précision l'ébauche de conception, cela est généralement réalisé grâce au zoom. Les solutions courantes incluent des solutions de mise à l'échelle basées sur les fenêtres d'affichage et sur les rem.

Du côté mobile, l'objectif peut être atteint en mettant à l'échelle le rapport de taille de page via la fenêtre d'affichage.

Pour faire simple, tous les pixels de largeur et de hauteur sont les mêmes que ceux de la sortie du manuscrit visuel, puis la fenêtre d'affichage est définie dynamiquement selon le rapport entre la largeur de la page et la largeur du manuscrit visuel. Référence du code de base du schéma de mise à l'échelle :

 (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; if (window.top !== window) { return pageScale } var width = docEl.clientWidth || 360; var hauteur = docEl.clientHeight || 640; if (largeur / hauteur >= 360 / 640) { // Priorité en hauteur pageScale = hauteur / 640; content = 'largeur=' + 360 + ', échelle initiale=' + pageScale + ', maximum-scale=' + pageScale + ', user-scalable=no'; document.getElementById('viewport').setAttribute('content', content); window.pageScale = pageScale } if (isMobile) { setScale() ; } else { docEl.className += 'pc' }})();

Cette solution a été mise en pratique dans la conception de notre page d’activité H5 l’année dernière.

Cependant, si vous souhaitez qu'il soit affiché sur le PC, puisqu'il n'y a pas de concept de mise à l'échelle de la fenêtre, il ne peut être défini qu'avec une valeur fixe, ce qui n'est pas idéal.

La solution d'adaptation de mise en page rem a été fréquemment mentionnée et est largement utilisée dans les produits des grandes sociétés Internet.

En termes simples, la méthode est la suivante :

1. Calculez et définissez dynamiquement la taille de la police de la balise racine HTML en fonction du rapport entre le brouillon de conception et la largeur de l'appareil ;
2. En CSS, la largeur, la hauteur, la position relative, etc. des éléments du projet de conception sont convertis en valeurs en unités rem selon la même proportion ;
3. Les polices du brouillon de conception utilisent px comme unité et sont légèrement ajustées via des requêtes multimédias.

Donnons un exemple pour illustrer.

Le premier problème est le calcul dynamique de la taille de la police des balises HTML. Cela dépend de la manière dont le taux de conversion est convenu. En prenant comme exemple dix parties égales de la largeur de la page, la référence du code principal :

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // Récupère la largeur de la fenêtre actuelle var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( ). width; // Supérieur à 1080px, appuyez sur 1080 si (largeur > 1080) { width = 1080; } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; // Traitement des erreurs et de la compatibilité sur certains modèles 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 ; { clearTimeout(minuterie); minuterie = setTimeout(setFontSize, 100 }); //Les mises à jour de la fenêtre modifient dynamiquement la taille de la police WIN.addEventListener('resize', dbcRefresh, false); //Calculer une fois lorsque la page est affichée WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh () } }, false); setFontSize();})(fenêtre)

De plus, pour les pages d'activité H5 en plein écran, il existe des exigences concernant le format d'image et des ajustements doivent être effectués à ce stade. Vous pouvez procéder ainsi :

 function ajusterWarp(warpId = '#warp') { // if (window.isMobile) return; const $win = $(window); const height = $win.height(); // Considérez la barre de navigation if (width / height < 360 / 600) { return; } width = Math.ceil(height * 360 / 640); $(warpId).css({ hauteur, largeur, position : 'relative', haut : 0, gauche : 'auto', marge : '0 auto' } // Recalculer rem window.setFontSize(width);}

En suivant cette méthode de mise à l'échelle, des dispositions précises avec une mise à l'échelle proportionnelle peuvent être obtenues sur presque tous les appareils.

Le deuxième problème est la valeur de la taille de l'élément.

En prenant comme exemple la largeur du brouillon de conception de 1080 px, nous divisons la largeur en 10 parties égales pour une conversion facile, puis 1rem = 1080/10 = 108 px. La méthode de conversion est la suivante :

 const px2rem = function(px, rem = 108) { let remVal = parseFloat(px) / rem if (typeof px === string && px.match(/px$/)) { remVal += 'rem' } retourner remVal ;}

Par exemple, il y a une image dans le brouillon de conception avec une taille de 460 x 210 et une position de page relative en haut : 321 px, gauche : 70 ;. Selon la méthode de conversion ci-dessus, le style CSS final de l'élément doit être :

 .img_demo { position : absolue ; taille d'arrière-plan : couverture ; image d'arrière-plan : url('demo.png'); haut : 2,97222rem ; gauche : 0,64814rem ;

Grâce à la méthode ci-dessus, le schéma de disposition rem est réalisé. Mais calculer manuellement la valeur du rem est évidemment irréaliste.

Avec l'outil de prétraitement less/sass, il nous suffit de définir la méthode mixins, puis de définir la valeur en fonction de la taille réelle du brouillon de conception. En prenant less comme exemple, la référence des mixins est la suivante :

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

Pour l'exemple d'élément précédent, le style CSS peut être écrit comme ceci :

 .img_demo { position : absolue ; taille d'arrière-plan : couverture ; image d'arrière-plan : url('demo.png'); .px2remTLWH(321, 70, 460, 210);}

Ici, la largeur et la hauteur peuvent être lues directement à partir de la taille de l'élément d'image produit dans le brouillon de conception ; les valeurs haut/gauche peuvent être rapidement obtenues en déplaçant la ligne de référence pour positionner l'élément dans Photoshop.

La mise à l'échelle des polices à l'aide des proportions rem entraînera des problèmes d'affichage. Il vous suffit d'utiliser des requêtes multimédias pour définir plusieurs tailles.

Exemple de référence :

 // Écran @media réactif aux polices et (largeur maximale : 321 px) { body { taille de police : 13 px ; }}écran @media et (largeur minimale : 321 px) et (largeur maximale : 400 px) { body { police - taille : 14 px ; }}@écran multimédia et (largeur minimale : 400 px) { corps { taille de police : 16 pixels ;}}

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.