web-dev-qa-db-ja.com

コンテナに合わせてテキストを拡大します

CSSを使用して、特にonload JavaScriptを使用しない場合、これを実行することは可能でしょうか。

幅150px、高さ100pxのセルがあります。テキストが含まれています。例：$ 20,00またはその変形。

コンテナのサイズに完全に合うようにします。

私はそれをjavascriptで行うことができ、パディング/マージンのないコンテナがセルの幅または高さ、あるいはその両方に達するまで、テキストのサイズを大きくします。または、オーバーフローが自動に設定されているものに含め、オーバーフローまたは何かが発生したときに確認します。

純粋なCSSでそれを行うことができますか？

フォントも固定サイズのフォントではないことを考慮してください。必要に応じて、Arialを使用してください。

cssfontsscale
20
MHD

私がやったことの1つは完璧ではありませんが、Xピクセルより小さい画面サイズに対して@mediaルールを使用し、フォントサイズを小さくまたは大きく設定することです。

h2{
  font-size:25px
}

@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */
   h2{
     font-size:19px;
   }
}

もちろん、これはテキストコンテナのサイズが何らかの方法でウィンドウサイズに基づいていることを前提としてのみ機能します。

6
Tyler

これをチェックしてください： http://css-tricks.com/viewport-sized-typography/

残念ながら、これはChrome 20+＆IE 10+でのみ機能するため、今のところ jsソリューション）を使用する必要があります ....

13
Miss A