css - 実装方法 :root { font-size: calc(100vw / 40); フォントサイズをスケーリングする

Answer 1

@mediaユーザーの画面サイズを検出するために使用する必要はありません。vw/vh の優れた点は、ビューポートのサイズに応じて自動的に調整されることです。上記のルールをスタイルシートに追加した後、すべてのサイズ測定に vw/vh/rem を使用するだけで、ユーザーがブラウザーのサイズを変更しても、レイアウトがスケーリングされます。

簡単な例を次に示します。width、height、margin-leftおよびfont-sizeプロパティはすべて rems またはビューポート単位のみを使用していることがわかります。スニペットを実行し、全画面表示してブラウザのサイズを変更すると、列とテキストを含むレイアウト全体がブラウザ ウィンドウの幅に合わせて拡大縮小されることがわかります ( CSSh1の vw の使用で示されています)。:rootルール）。

:root {
  font-size: calc(100vw / 40);
}

body, h1, h2 { margin: 0; }

h1 {
  position: fixed;
  width: 15rem;
  height: 100vh;
  font-size: 4rem;
  background-color: #ccc;
}

h2, p { margin-left: 15rem; }

h2 {
  font-size: 2.4rem;
  background-color: #ff0;
}

p {
  font-size: 1.2rem;
}

<h1>Title</h1>
<h2>Subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ea sed adversarium
   definitionem, legere malorum laboramus ne cum. Dictas corrumpit vix at, sea
   platonem senserit sapientem ne. At vel laudem audire bonorum. Perfecto posidonium
   eu has, ullum mollis inimicus eos te, sit eu novum atomorum.
<p>Alii libris evertitur in vix, congue ocurreret ut usu, nostro dolores vulputate
   pri ex. Eu eam sint moderatius, eu eos wisi corpora, est sanctus corpora ad. Cu
   nam utamur saperet. Qui id purto quaerendum, ex usu iudico alterum voluptatibus.
<p>Illum mucius praesent id eam, oratio habemus eum ei. Saepe docendi at est, eu mea
   perfecto voluptaria, has admodum recusabo contentiones te. Putant definitionem sea
   ea, viris tantas ad cum. Wisi melius ius ut, est te unum aliquando. Ea quo
   ancillae philosophia.