Maison >interface Web >js tutoriel >Exemple de js implémentant la correspondance automatique rem et le calcul de la taille de la police

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

韦小宝original: 2018-01-16 11:11:051268parcourir

Cet article présente principalement l'exemple de la correspondance automatique des rem et du calcul de la taille de la police dans js. L'éditeur pense que c'est plutôt bon. Maintenant, je vais partager le code source de js avec vous et vous donner une référence. Si vous êtes intéressé par js, veuillez suivre l'éditeur pour y jeter un œil

Pendant le processus de développement lui-même, 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 lié à JavaScript :

(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

. 640px La largeur de la page est une largeur maximale sûre, ce qui garantit 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, 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>

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun ! !

Recommandations associées :

Le résumé d'apprentissage JavaScript le plus complet

Partage de meilleures solutions pour une expérience JavaScript asynchrone

Comment utiliser des expressions régulières pour mettre en évidence le code JavaScript

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!

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：Quels exemples d'API sont partagés dans jqueryArticle suivant：Quels exemples d'API sont partagés dans jquery

Articles Liés

Voir plus