Exemples pour expliquer l'implémentation par js de la correspondance automatique des rem et du calcul de la taille de la police-js tutoriel-php.cn

Exemples pour expliquer l'implémentation par js de la correspondance automatique des rem et du calcul de la taille de la police

小云云

Libérer： 2017-12-19 16:40:03

original

1726 Les gens l'ont consulté

Pendant le processus de développement proprement dit, nous sommes souvent confus par divers calculs de largeur et de hauteur. Surtout en utilisant la méthode de calcul rem, la mise en page adaptative déconcerte un grand nombre de programmeurs. Afin de résoudre ce genre de problème, je pense que vous pouvez utiliser js pour surveiller les changements de largeur d'écran afin de modifier la valeur de la taille de la police de l'élément racine HTML. Cet article présente principalement l'exemple de la correspondance automatique rem et du calcul de la taille de la police dans js. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Ce qui suit est le code d'implémentation JavaScript pertinent :

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;,
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if(clientWidth>=640){
        docEl.style.fontSize = &#39;100px&#39;;
      }else{
        docEl.style.fontSize = 100 * (clientWidth / 640) + &#39;px&#39;;
      }
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener(&#39;DOMContentLoaded&#39;, recalc, false);
})(document, window);

Copier après la connexion

Ce code sélectionne 640px comme valeur de base.

< 🎜 La largeur de page > 640 px est une largeur maximale sûre, garantissant qu'il n'y aura pas d'espace blanc des deux côtés de la page mobile. Notez que px est ici un pixel logique CSS, différent du pixel physique de l'appareil. Par exemple, l'iPhone 5 utilise un écran Retina et utilise un pixel d'appareil de 2px x 2px pour représenter un pixel CSS de 1px x 1px, donc le numéro de pixel de l'appareil est de 640 x 1136px et son numéro de pixel logique CSS est de 320 x 568px. .

Ainsi, lorsque vous souhaitez passer à la page mobile, vous devez redimensionner la largeur du rendu à 640px.

Par exemple, lorsque la largeur d'un p sur la page est de 60 et la hauteur est de 65, vous pouvez directement écrire le style comme ceci :

{
  width:0.6rem;
  height:0.65rem
}

Copier après la connexion

Compatibilité des navigateurs

rem est une unité de mesure nouvellement introduite dans CSS3. Tout le monde se sentira certainement frustré et inquiet à propos de la prise en charge du navigateur. En fait, il n'y a pas lieu d'avoir peur. Vous pourriez être surpris qu'il existe de nombreux navigateurs pris en charge, tels que : Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, IE9+ et Opera11+. C'est juste que les pauvres IE6-8 ne le peuvent pas, alors traitez-les comme transparents. J'ai toujours été comme ça.

Cependant, lorsque vous utilisez des unités pour définir les polices, vous ne pouvez pas ignorer complètement IE. Si vous souhaitez utiliser ce REM, mais souhaitez également être compatible avec l'effet sous IE, vous pouvez envisager d'utiliser "px" et ". rem" ensemble. Utilisez "px" pour obtenir l'effet sous IE6-8, puis utilisez "Rem" pour obtenir l'effet du navigateur. Laissez simplement IE6-8 ne pas changer avec le changement de texte. Qui rend ce Ie6-8 si vieux ? C'est assez intéressant si vous ne voulez pas l'essayer. Peut-être que cela deviendra l'unité de mesure courante.

Exemple de code complet :

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
   <meta content="telephone=no" name="format-detection" />
   <meta name="format-detection" content="email=no" />
   <meta http-equiv="Cache-Control" content="no-cache"/>
 <title>响应式布局</title>
 <style>
  html{font-size: 20px;width: 100%;height: 100%;}
  body{margin: 0;padding: 0;}
  header,footer{width: 100%;background: #17A578;color: #fff;font-size:1rem;text-align: center;line-height: 2rem;}
  .footer{position: fixed;bottom: 0;}
  .box{}
  .public{width: 5rem;height: 5rem;font-size: 1.2rem;display: inline-block;text-align: center;color: #fff;line-height: 5rem;margin-top: 1rem;}
  .left{background: #f00;}
  .center{background: #048F74;}
  .right{background: #000;}
 </style>
 </head>
 <body>
 <header>页面头部</header>
 <p class="box">
  <p class="public left">左</p>
  <p class="public center">中</p>
  <p class="public right">右</p>
  <p class="public left">左</p>
  <p class="public center">中</p>
  <p class="public right">右</p>
 </p>
 <footer class="footer">页面底部</footer>
  <script>
    //orientationchange方向改变事件
    (function (doc, win) {
     var docEl = doc.documentElement,//根元素html
     //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
      resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;,
      recalc = function () {
       var clientWidth = docEl.clientWidth;
       if (!clientWidth) return;
       //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
       docEl.style.fontSize = 20 * (clientWidth / 320) + &#39;px&#39;;
      };
      //alert(docEl)
     if (!doc.addEventListener) return;
     win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
     doc.addEventListener(&#39;DOMContentLoaded&#39;, recalc, false)//绑定浏览器缩放与加载时间
    })(document, window);
    //alert(document.documentElement.clientWidth/320)

  </script>
 </body>
</html>

Copier après la connexion

Recommandations associées :

Partager une introduction à la taille de la police syntaxe et exemples de didacticiels associés

Utilisation de l'attribut font-size-adjust de CSS pour améliorer les détails de la mise en page Web

page mobile wap basée sur dpr et width Calculez la valeur correspondante de font-size_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!