La solution réactive h5 la plus utilisée pour les terminaux mobiles ces dernières années est la solution rem. Cela nécessite de calculer la taille de police de l'élément racine pour obtenir une réactivité.
Mais cette solution présente également un inconvénient, c'est-à-dire que lorsque font-size n'est pas un nombre entier, certaines polices utilisent des unités rem, ce qui entraînera des problèmes avec la taille de l'affichage des polices. Cela reste un casse-tête pour le développement front-end des projets. avec des exigences élevées en matière de restauration visuelle.
Résoudre la réactivité du front-end n'est rien de plus que de l'afficher normalement sur différents appareils. Nous présentons ici une solution réactive qui ne nécessite pas la méthode rem. Utilisez directement px. Nous parlons ici du brouillon de conception basé sur 750 px. Combien de px avez-vous mesuré dans le brouillon de conception ?
Écrivez directement combien de px. N'est-ce pas très rapide et ne nécessite pas de conversion rem ?
Ici, nous utilisons en fait l'échelle de transformation pour redimensionner la taille de la page afin d'obtenir une réactivité.
Code de base :
let screenMatch = () => { document.body.style.setProperty('visibility', 'hidden') let page = document.getElementById(page); let _scale = window.outerWidth/750; , 0 0); page.style.setProperty(transform, scale(+ _scale + )); page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, scale(+ _scale + )); setTimeout(() => { page.style.setProperty(transformOrigin , 0 0); page.style.setProperty(transform, scale(+ _scale + )); page.style.setProperty(-webkit-transform-origin, 0 0); page.style.setProperty(-webkit-transfrom, scale(+ _scale + )); document.body.style.setProperty('visibilité', 'visible ') }, 100); screenMatch(); window.onresize = screenMatch;Dans le code ci-dessus, le nœud avec l'identifiant de page est le nœud de départ de l'élément de page entier et le premier élément sous le corps. Ici, body/html doit définir min-height:100%;height:100%;
En fait, nous pouvons également utiliser des unités px dans les mini-programmes, mais il y aura quelques bugs de police lors de l'utilisation de transform dans les mini-programmes. Enfin, nous venons de modifier l'attribut zoom et d'utiliser -webkit-zoom pour la compatibilité. Le code principal n'est pas très différent de h5. La même chose est la taille du zoom.
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.