H5レスポンシブ開発のホームページコンテンツ(4)

ウェブフォントの適応調整

私たちのホームページは以前にも書かれていますが、適応型ページとして、ページが縮小されても、スタイル上の理由により、さまざまなデバイスのフォントサイズは変わりません。 PC 上のフォントのサイズ さまざまなデバイスのサイズに適応させるために、ページのフォントのサイズを判断する必要があります。

@media:

@media クエリを使用すると、メディア タイプごとに異なるスタイルを定義できます。

@media は、さまざまな画面サイズに応じてさまざまなスタイルを設定できます。特に応答性の高いページを設定する必要がある場合、@media は非常に便利です。

ブラウザのサイズをリセットすると、ブラウザの幅と高さに応じてページも再レンダリングされます。

/*小屏幕 大于等于768px*/ @media (min-width: 768px) { .tab-h2{ font-size: 26px; } .tab-p{ font-size: 16px; } .text h3{ font-size: 22px; } .text p{ font-size: 16px; } } /*中等屏幕 大于等于992px*/ @media (min-width: 992px) { .tab-h2{ font-size: 28px; } .tab-p{ font-size: 17px; } .text h3{ font-size: 24px; } .text p{ font-size: 18px; } } /*大屏幕 大于等于1200px*/ @media (min-width: 1200px) { .tab-h2{ font-size: 30px; } .tab-p{ font-size: 18px; } .text h3{ font-size: 26px; } .text p{ font-size: 19px; } }

画面解像度が 768 ピクセルを超える、992 ピクセルを超える、および 1200 ピクセルを超える場合のフォント段落のサイズを調整しました。この時代では、画面の解像度が異なると、同じ Web ページのレイアウトが異なるデバイスで適切に表示され、Web ページのフォント サイズも異なります。

---

この章の難しさ

1. 画面解像度ごとに異なるフォントサイズを設定する

2. @mediaの使用法