rem絶対適応解解析-jsチュートリアル-php.cn

rem絶対適応解解析

一个新手

リリース： 2017-10-12 10:40:40

オリジナル

1608 人が閲覧しました

レム

css3で追加されたレムは今大人気のユニットです。 MDN の説明を見てください:

この単位は、ルート要素の font-size 大小（例如 <html> 要素のフォントサイズを表します)。

このユニットを使用して、ページ全体に適応するようにページサイズに応じて HTML のフォントサイズを変更するだけで、完璧なスケーラブルなレイアウトを作成できます。そこで問題は、HTML のフォントサイズをどのように適応させるかということです。

メディアクエリ

メディアの使用方法についてはここでは詳しく説明しません。ページアダプテーションの目的を達成するためにメディアクエリを通じてHTMLのフォントサイズが変更されることを簡単に説明します。

htmlは次のとおりです:

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

ログイン後にコピー

cssは次のとおりです:

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

ログイン後にコピー

メディアクエリを通じて、HTMLのフォントサイズは、異なるサイズ範囲のページで異なるように設定されます。ページ幅 700px の場合、HTML のフォントサイズは 14px、1rem = 14px、li 要素のフォントサイズは 14px、パッケージの内側の余白も 14px になります。ページ幅をフォントサイズの 800px に変更します。 HTML の 16px なら、1rem = 16px、li 要素のフォントサイズは 16px になり、パッケージの内側のマージンも 16px になります

このように、メディアクエリが細かく分割されるほど、適応性はより強力になりますが、完全な適応を達成することはできず、それは間隔ベースのみです。

vwはビューポートの1/100を表し、100vwはビューポートの幅を表します。これを使用すると、HTML のフォントサイズを完全に適応させることができます。

cssは以下の通りです:

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

ログイン後にコピー

例の768pxは、一般的にはデザイン案のサイズを基準として適応させたものです。完全に適応できるようにページサイズを調整します。

JS調整

ページをロードしてウィンドウサイズを調整する際、HTMLのフォントサイズを設定することで適応性の目的を達成しました。

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

ログイン後にコピー

1. ビューポート幅を取得する

2. ビューポート幅の変更に基づいてHTML

のフォントサイズを標準に設定する

以上がrem絶対適応解解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。