画面サイズに合わせ要素も縮小

Question

プログラミングのcssについて質問です。 webサイトなどのレスポンシブで、ある程度以下の画面サイズになった時に、デザインを崩さず、要素などを縮小している処理はどのようにしているのでしょうか。

google chromeでは10px以下に指定できないのに画面サイズの縮小に伴いテキストも縮小していくサイトがあったのでやり方を知りたいです。

Answer 1

上の回答のようにvwを使っている。
もしくはメディアクエリなどを使用して
幅に応じてscaleの値を変更することで
見た目上は10px以下に出来ます。

例 fontSize10pxとする

//幅600px以下なら
transform: scale(0.5); fontSize 5px
//幅300px以下なら
transform: scale(0.3); fontSize 3px

Answer 2

画面サイズの縮小に伴いテキストも縮小していくサイトがあったのでやり方を知りたいです。

推測ですか、フォントサイズの単位を vw にしている。

vwは画面幅を100とする単位です。
要素の幅の単位も vw にすれば画面幅に応じて縮小します。

画面高を基準にする場合は、vh です。