Maison > Article > interface Web > js implémente la correspondance automatique rem et le calcul de la taille de la police

js implémente la correspondance automatique rem et le calcul de la taille de la police

小云云original: 2018-01-18 10:50:331533parcourir

Cet article présente principalement l'exemple de correspondance automatique rem et de calcul de la taille de la police en 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 et jetons un œil. J'espère que cela pourra aider tout le monde.

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.

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);

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

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
}

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, n'ayez pas 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>

Recommandations associées :

Méthode d'adaptation de la mise en page rem HTML5 détaillée explication

Javascript utilise rem pour le partage d'exemples de développement réactif

analyse de solution adaptative absolue rem

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!

JavaScript html5 firefox css chrome safari css3 html JS iphone

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'installation, de l'emballage et de la fusion de gulpArticle suivant：Explication détaillée de l'installation, de l'emballage et de la fusion de gulp

Articles Liés

Voir plus