方法-レスポンシブテキスト
CSSを使用してレスポンシブタイポグラフィを作成する方法を学びます。
こんにちは世界
ブラウザウィンドウのサイズを変更して、フォントサイズがどのように拡大縮小されるかを確認します。
レスポンシブフォントサイズ
vw
テキストサイズは、「ビューポート幅」を意味する単位で設定できます。
そうすれば、テキストサイズはブラウザウィンドウのサイズに従います。
例
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
ビューポートはブラウザのウィンドウサイズです。1vw =ビューポート幅の1%。ビューポートの幅が50cmの場合、1vwは0.5cmです。
メディアクエリでフォントサイズを変更する
メディアクエリを使用して、特定の画面サイズの要素のフォントサイズを変更することもできます。
可変フォントサイズ。
例
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
ヒント:フォントの詳細について は、CSSフォントチュートリアルにアクセスしてください。
メディアクエリの詳細については、 CSSメディアクエリチュートリアルをご覧ください。