rem absolute adaptive Schemaanalyse-js-Tutorial-php.cn

rem absolute adaptive Schemaanalyse

一个新手

Freigeben： 2017-10-12 10:40:40

Original

1637 Leute haben es durchsucht

rem

Das neue rem in CSS3 ist mittlerweile eine sehr beliebte Einheit. Schauen Sie sich die Beschreibung auf MDN an:

Diese Einheit stellt die font-size-Größe des Stammelements dar (z. B. die Schriftgröße des <html>-Elements).

Verwenden Sie diese Einheit, um ein perfekt skalierbares Layout zu erstellen. Ändern Sie einfach die Schriftgröße des HTML entsprechend der Seitengröße, um sie an die gesamte Seite anzupassen. Die Frage ist also: Wie kann man die Schriftgröße von HTML anpassen?

Medienabfrage

Ich werde hier nicht näher auf die Verwendung von Medien eingehen, sondern lediglich erklären, wie man die Schriftgröße von HTML durch Medienabfrage ändert, um den Zweck der Seite zu erreichen Anpassung.

　HTML lautet wie folgt:

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

Nach dem Login kopieren

CSS lautet wie folgt:

//媒体查询控制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;
  }

Nach dem Login kopieren

Durch Medienabfrage wird die Schriftgröße von HTML auf Seiten unterschiedlicher Größe unterschiedlich eingestellt.

Wenn die Seitenbreite 700 Pixel beträgt, beträgt die Schriftgröße von HTML ist 14px, zu diesem Zeitpunkt ist 1rem = 14px, die Schriftgröße des li-Elements beträgt 14px, und der innere Rand des Pakets beträgt ebenfalls 14px; ändern Sie die Seitenbreite auf 800px, die Schriftgröße von HTML beträgt zu diesem Zeitpunkt 16px 1rem = 16px, die Schriftgröße des li-Elements wird 16px, der innere Rand des Pakets wird ebenfalls 16px; Auf diese Weise ist die Anpassungsfähigkeit natürlich umso stärker, je detaillierter die Medienabfrage unterteilt ist wird sein, kann aber keine vollständige Anpassung erreichen, sondern ist nur intervallbasiert.

1/100 des durch vw dargestellten Ansichtsfensters 100vw repräsentiert die Breite des Ansichtsfensters. Damit können wir eine vollständig adaptive Schriftgröße von HTML erreichen.

css lautet wie folgt:

Die 768px im Beispiel sind ein angenommener Standardwert und die Größe von Der allgemeine Designentwurf ist Standard und wird dann angepasst. Passen Sie die Seitengröße so an, dass sie vollständig adaptiv ist.

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

Nach dem Login kopieren

JS-Anpassung

Legen Sie beim Laden der Seite und beim Anpassen der Fenstergröße die Schriftgröße des HTML fest, um den Zweck der Anpassungsfähigkeit zu erreichen.

1. Ermitteln Sie die Breite des Ansichtsfensters

    (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) //加载页面触发
    })()

Nach dem Login kopieren

2. Legen Sie die Schriftgröße von HTML

basierend auf der Änderung der Breite des Ansichtsfensters fest zum Standard

Das obige ist der detaillierte Inhalt vonrem absolute adaptive Schemaanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!