html - CSS を使用してテキスト サイズをウィンドウのサイズに対するパーセンテージで設定する方法はありますか?

Question

テキストのサイズをブラウザ ウィンドウのパーセンテージとしてスタイル設定する方法はありますか? 例えば：

h1
{
    height: 15%;
    /* in my ideal world this would be 15% of the window 
       (or parent) size rather than inherited font-size */
}

Answer 1

CSS3の場合：

h1{
   font-size: 15vw; // relative to the viewport's width
   font-size: 15vh; // relative to the viewport's height
   font-size: 15vm; // relative to the ratio width/height of the viewport
}

しかしもちろん、これはすべてのブラウザで機能するわけではありません。

こちらをご覧ください：http ：//www.w3.org/TR/css3-values/#viewport-relative-lengths

Answer 2

少しの js を気にしない場合は、 http: //fittextjs.com/ に優れた jquery ソリューションがあります。

Answer 3

これは完璧ではありませんが、メディア クエリを使用すると、それに近づくことができます。

@media screen and (max-height: 50px) {
  body {
    font-size: 7.5px;
  }
}

@media screen and (max-height: 100px) {
  body {
    font-size: 15px;
  }
}

@media screen and (max-height: 150px) {
  body {
    font-size: 22.5px;
  }
}

@media screen and (max-height: 200px) {
  body {
    font-size: 30px;
  }
}

いつ「ブレーク」ポイントを作成し、ローエンドとハイエンドでどれだけ遠くまで移動するかを決定する必要があります。