analyse de solution adaptative absolue rem-js tutoriel-php.cn

analyse de solution adaptative absolue rem

一个新手

Libérer： 2017-10-12 10:40:40

original

1612 Les gens l'ont consulté

rem

Le nouveau rem en CSS3 est désormais une unité très populaire. Jetez un œil à la description sur MDN :

Cette unité représente la taille font-size de l'élément racine (comme la taille de police de l'élément <html>).

Utilisez cette unité pour créer une mise en page évolutive parfaite. Modifiez simplement la taille de la police du HTML en fonction de la taille de la page pour l'adapter à la page entière. La question est donc de savoir comment rendre la taille de la police HTML adaptative ?

Requête multimédia

Je n'entrerai pas dans les détails de l'utilisation des médias ici, j'expliquerai simplement comment modifier la taille de la police HTML via la requête multimédia pour atteindre l'objectif de la page. adaptation.

　HTML est le suivant :

  <article class="container">
    <ol>
      <li>rem是相对于root元素(html)字体大小的一个单位。 eg:html默认font-size为16px  则1rem = 16px</li>
      <li>若元素以rem为单位去设置字体、宽高、边距等。则修改html字体大小就能达到所有元素一起等比例修改的效果</li>
      <li>所以要实现html字体在不同页面大小下自适应</li>
    </ol>
  </article>

Copier après la connexion

CSS est le suivant :

//媒体查询控制html字体大小 
 @media (max-width:767px) {
    html{
      font-size: 14px;
    }
  }
  @media (min-width:768px) {
    html{
      font-size: 16px;
    }
  }
  @media (min-width:992px) {
    html{
      font-size: 20px;
    }
  }

//页面元素的简单样式
  .container{
    padding: 1rem;
  }
  li{
    font-size: 1rem;
  }

Copier après la connexion

Grâce à la requête multimédia, la taille de la police du HTML est définie différemment sur les pages de différentes tailles

Lorsque la largeur de la page est de 700 px, la taille de la police de ; HTML est de 14px, à l'heure actuelle 1rem = 14px, la taille de la police de l'élément li est de 14px et la marge intérieure du package est également de 14px, changez la largeur de la page à 800px, la taille de la police du HTML est de 16px, pour le moment ; 1rem = 16px, la taille de la police de l'élément li devient 16px , la marge intérieure du package devient également 16px

Bien sûr, plus la requête multimédia est divisée dans cette méthode, plus l'adaptabilité est forte ; mais il ne peut pas réaliser une adaptation complète, il est uniquement basé sur des intervalles.

vw

1/100 de la fenêtre représentée par vw 100vw représente la largeur de la fenêtre. En l'utilisant, nous pouvons obtenir une taille de police HTML entièrement adaptative.

　css est le suivant :

  html{
    font-size: calc(16/768*100vw);   //以768时16px为标准进行缩放
  }

Copier après la connexion

Le 768px dans l'exemple est une valeur standard supposée, et la taille de le projet de conception générale est standard, puis s'adapte. Ajustez la taille de la page pour qu’elle soit entièrement adaptative.

Ajustement JS

Lors du chargement de la page et de l'ajustement de la taille de la fenêtre, définissez la taille de la police du HTML pour atteindre l'objectif d'adaptabilité.

    (function(){
      var doc = document.documentElement,
          resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;;

      function changeFontSize(){
        var clietWidth = doc.offsetWidth,
            scale = clietWidth/768;   //以768为标准

        doc.style.fontSize = scale * 16 + &#39;px&#39;;      }

      if (!doc.addEventListener) return;

      window.addEventListener(resizeEvt,changeFontSize)  //窗口大小变化或者手机横屏
      document.addEventListener(&#39;DOMContentLoaded&#39;,changeFontSize) //加载页面触发
    })()

Copier après la connexion

1. Obtenez la largeur de la fenêtre d'affichage

2. Définissez la taille de la police HTML

en fonction du changement de largeur de la fenêtre d'affichage à la norme

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!