Explication détaillée de la solution réactive HTML5 de l'unité px

La solution mobile h5 responsive la plus couramment utilisée 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é. Cet article vous présente principalement les informations pertinentes de la solution responsive HTML5 px unit, dans l'espoir de vous aider.

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 posera des problèmes avec la taille de l'affichage de la police. C'est toujours un problème pour. des projets avec des exigences élevées en matière de restauration visuelle. C'est un casse-tête pour le développement front-end.

Résoudre la réactivité du front-end n'est rien d'autre que de l'afficher normalement sur différents appareils. Voici une solution réactive qui ne nécessite pas de rem. Utilisez directement px. Nous parlons ici du brouillon de conception basé sur 750 px. Combien de px mesurez-vous dans le brouillon de conception ? Écrivez directement combien de px dans le style

. N'est-ce pas très rapide et ne nécessite pas de conversion rem ?

1. transform

2. transform-origin

Il s'agit en fait de la page de zoom d'échelle utilisant la taille de transformation pour atteindre la réactivité.

Code principal :

let screenMatch = () => {
            document.body.style.setProperty('visibility', 'hidden')
            let page = document.getElementById("page");
            let _scale = window.outerWidth/750;
            
            page.style.setProperty("transformOrigin", "0 0");
            page.style.setProperty("transform", "scale("+ _scale + ")");
            //兼容ios8
            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 + ")");
                //兼容ios8
                page.style.setProperty("-webkit-transform-origin", "0 0");
                page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
                document.body.style.setProperty('visibility', 'visible')
            }, 100);

        }
        screenMatch();
        window.onresize = screenMatch;

Dans le code ci-dessus, le nœud avec l'identifiant 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 le mini-programme, mais lors de l'utilisation de transform dans le mini-programme, il y aura il y a eu un bug d'irrégularité de la police, j'ai finalement juste changé l'attribut de zoom et utilisé -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.

Recommandations associées :

Tutoriel de production de bannières réactives HTML5

Introduction détaillée à l'exemple de code d'implémentation d'une grille à neuf carrés dans le design réactif HTML5 (Photo)

Top Ten HTML5 Responsive Framework_html/css_WEB-ITnose

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!