web-dev-qa-db-ja.com

純粋なCSSを使用して流動的なフォントサイズを実装する方法

テキストを<div>sで囲みました。テキストのフォントサイズを含めて全体を滑らかにしたいと思います。つまり、テキストは含まれている要素のサイズに応じてサイズが変更されます。

私は Javasript + CSSソリューション に出くわしましたが、純粋なCSSでそれが可能かどうか疑問に思っていますか？

htmlcssfluid-layout
16
skyork

はい、CSS 3メディアクエリをご覧ください。ビューポートの幅に応じて異なるスタイルルールを提供できます。これには、フォントサイズの変更が含まれます。

6
Jim

ジムはあなたに正確な情報を提供しましたが、それはわずかに尋ねられた質問から逸脱しています。レスポンシブデザイン（@mediaクエリ）では、画面サイズに応じてテキストを変更できます。私が理解していることから、流動的なテキストサイズ（ウィンドウサイズの変更中にテキストの継続的なサイズ変更）のための純粋なCSSソリューションがあるかどうかを尋ねていました。

これは、新しい フォントサイズ設定手法 のcss-tricksの説明へのリンクです。これは新しいブラウザであり、古いブラウザではいくつかの問題が発生する可能性が高く、新しいブラウザ（Chrome + Safari）でもバグがないわけではないことに注意してください。

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

編集-追加コード

33
Brett Santore

短い答え

フォントサイズを流動的にすることはできませんが、 viewport-percentage lengths が広く利用できるようになった場合はそうなります。

長い答え

responsiveおよびfluidという2つの用語を理解する必要があります。

Responsiveは、スタイルシートを異なるウィンドウサイズに異なる方法で応答させることを意味します。これは CSS Media Queries を使用して行われます。レスポンシブはWebデザインのhippestの単語の1つですが、ほとんどの場合、退屈するまで、CSSを絶対長さごとにハードコーディングします。

Fluidは、パーセンテージなどの相対的な長さの単位で作業することを意味します。相対長さの単位を使用すると、すべてのサイズが自動的に計算されます。

例

<div>文書の本文の内側にあり、ウィンドウの半分を埋めるようにします。

responsiveソリューションはこれです：

@media (max-width: 1px) {
  body > div {
    width: 0.5px;
  }
}

@media (max-width: 2px) {
  body > div {
    width: 1px;
  }
}

@media (max-width: 3px) {
  body > div {
    width: 1.5px;
  }
}

@media (max-width: 4px) {
  body > div {
    width: 2px;
  }
}

/* Repeat until you reach gigabytes and hit operating systems' file size limitations. */

そしてfluidソリューション：

body > div {
  width: 50%;
}

そう？

今日私たちを制限しているのは、ビューポート相対長さ単位に対する幅広いサポートがないことです。あなたができることは、「純粋なCSSfluidフォントサイズ」のアイデア全体を捨てて、sensitive。

2
AlicanC

レスポンシブで滑らかなフォントのメディアクエリで計算を使用する

@media screen and (min-width: 25em){
  div {  
    font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
  }
}
0
static_null