Explication détaillée d'exemples de définition dynamique de la taille de police sur les terminaux mobiles

Origine de rem : taille de police de l'élément racine, alors rem est une unité, et la taille de l'unité est déterminée par la taille de la font-size. Désormais, les codeurs front-end sacrifient silencieusement leur propre santé afin de voir une page Web saine sur chaque écran, car non seulement ils ont besoin de savoir que rem est une unité, mais plus important encore, ils doivent savoir comment afficher les pages à différents endroits. résolutions. Très NB.

Cause de l'accident :
L'unité 1.px est très populaire sur PC Quand on regarde l'écran du mobile, MLGB, la même unité 12px est. plus petit. Comme des fourmis.
2. Il a finalement été réglé à la normale sur l'iPhone 4. Lorsque j'ai changé pour un téléphone de marque Chrysanthemum, le MBD était inesthétique.
3. Je sais comment utiliser rem, mais quelle est la taille de police appropriée du HTML Bon sang ~.

D'accord, résolvons ces problèmes maintenant.
Avant de résoudre le problème, veuillez comprendre certaines choses que vous ne voudriez peut-être pas savoir (avertissement : si vous ne les comprenez pas, vous ne pouvez pas connaître la vérité~) :
1 .Pixels physiques
Chaque écran que nous voyons est composé de petites particules (pixels physiques) difficiles à voir à l'œil nu.

2. Le pixel logique est un point dans le système de coordonnées de l'ordinateur. Ce point représente un pixel virtuel qui peut être utilisé par le programme (tel que. Pixel CSS).

3. Le rapport de pixels de l'appareil (rapport de pixels de l'appareil) est appelé DPR
Sa valeur reflète les pixels physiques et pixels logiques La relation entre eux, la taille du DPR de l'appareil peut être calculée à l'aide de la formule :

DPR = 物理像素 / 逻辑像素

Ensuite, après avoir compris les concepts ci-dessus, vous pouvez savoir pourquoi css est écrit sur le PC Mais il est devenu plus petit lorsque je suis passé au téléphone portable ? À cause du DPR, frère~. font-size=12px;
Oui, notre DPR sur l'écran de l'ordinateur est 1, mais le téléphone portable est différent, il peut être 2 ou 3. Il existe encore des moyens d'obtenir le DPR de l'appareil :
1 En JavaScript, utilisez pour obtenir window.devicePixelRatio
2 En CSS, utilisez , <. 🎜> et -webkit-device-pixel-ratio effectuent des requêtes multimédias et effectuent certaines adaptations de style pour différents appareils DPR (cela concerne uniquement les navigateurs et les vues Web basés sur Webkit). -webkit-min-device-pixel-ratio-webkit-max-device-pixel-ratio

J'ai également lu de nombreux articles sur la configuration dynamique du rem en ligne. En voici quelques-uns couramment utilisés :

<. 🎜> Tout d'abord, utilisez les requêtes multimédias pour définir la taille de la police HTML :

Deuxièmement, utilisez js pour définir dynamiquement

@media screen and (min-width: 320px) {html {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {html {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {html {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {html {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {html {font-size: 22px;}
}
 
@media screen and (min-width: 640px) {html {font-size: 28px;}
}

Ce que je veux dire est le dernier, qui, à mon avis, est une meilleure méthode d'implémentation à l'heure actuelle :

!(function(doc, win) {var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

Utilisez js pour calculer le DPR de l'appareil actuel, définissez-le dynamiquement sur le html et définissez dynamiquement le html , utilisez le sélecteur CSS pour définir la taille de la police sous différents DPR en fonction du DPR (cette méthode est très bonne ~)
font-size

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!