recherche

Maison >interface Web >js tutoriel >Comment faire correspondre et calculer la taille de la police en js

Comment faire correspondre et calculer la taille de la police en js

php中世界最好的语言
php中世界最好的语言original
2018-04-14 14:40:481863parcourir

Cette fois, je vais vous montrer comment faire correspondre et calculer la taille de la police avec js. Quelles sont les précautions pour faire correspondre et calculer la taille de la police avec js. Ce qui suit est un cas pratique, jetons un coup d'oeil.

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.

Voici le code d'implémentation du JavaScript associé : 

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

Ce code sélectionne 640px comme valeur de base. Pourquoi choisir 640 ? La largeur de page de 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. Tel que l'iPhone 5 utilise l'écran Retina Retina, en utilisant un pixel de périphérique de 2 px x 2 px pour représenter 1 px x 1 px CSS pixel, le nombre de pixels de l'appareil est donc de 640 x 1136 px, tandis que son nombre de pixels logique CSS est de 320 x 568 px.

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 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 concernant 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 et utiliser ". px" pour y parvenir. 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 :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP ! 
<!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 = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
       var clientWidth = docEl.clientWidth;
       if (!clientWidth) return;
       //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
       docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
      };
      //alert(docEl)
     if (!doc.addEventListener) return;
     win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
     doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间
    })(document, window);
    //alert(document.documentElement.clientWidth/320)
  </script>
 </body>
</html>

Lecture recommandée :

L'explication la plus détaillée de l'installation de gulp + de l'emballage + de la fusion


Compatible avec canvas.toDataURL sous IE11 Solutions aux problèmes sexuels


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：L'explication la plus détaillée de l'installation de gulp + packaging + fusionArticle suivant：L'explication la plus détaillée de l'installation de gulp + packaging + fusion

Articles Liés

Voir plus