CSSでブラウザのサイズを設定する方法

CSS (Cascading Style Sheets) は、Web ページのスタイルを記述するために使用される言語です。CSS を使用して、Web ページのレイアウト、フォント、色、背景、その他の要素のスタイルを設定できます。このうち、ブラウザのサイズを設定する方法もCSSを通じて実現できます。

CSS スタイルを記述する場合、「@media」ルールを使用してさまざまなサイズのメディア クエリを定義し、画面サイズやデバイスの種類に応じてさまざまなスタイルを適用できます。この方法では、ページのレイアウトとレイアウトを変更して、さまざまな画面サイズで最適な表示効果を実現できます。

CSS を使用してブラウザのサイズを設定する方法をいくつか紹介します。

1. メディア クエリの使用
   @メディア ルールは CSS3 の新機能で、画面の幅や高さを調整してさまざまなスタイルを設定します。メディア クエリを通じて、さまざまなデバイスに特定のスタイルを設定できます。例は次のとおりです:

@media screen and (max-width: 480px) {
body {

background-color: yellow;

}
}

@メディアのみの画面と (最小幅: 481 ピクセル) と (最大幅: 768 ピクセル) {
本体 {

background-color: blue;

}
}

@メディアのみの画面と (min-width: 769px) {
body {

background-color: green;

}
}

この例では、@ を使用しますメディア ルールを使用して 3 つの異なるメディア クエリを定義します。各メディア クエリには最大または最小の画面幅があり、スタイルをいつ適用するかを決定するために使用されます。上記のコードでは、3 つの異なる画面幅の背景色を定義しています。480px 以下の画面の背景色は黄色、幅が 481px から 768px までの画面の背景色は青、そして背景色は 480px 以下の画面の背景色です。幅が 769px 以上の画面の色 画面の背景色は緑色です。

2. CSS ビューポート単位の使用
   CSS ビューポート単位とは、ビューポート (ビューポート) に対する相対的な単位を指し、画面サイズに応じてさまざまなスタイルを設定できます。ビューポートとは、ブラウザの表示領域のサイズを指します。たとえば、ブラウザで Web ページを開いたときに表示される領域がビューポートです。

一般的に使用されるビューポート単位の一部を以下に示します:

• vw: ビューポートの幅のパーセンテージを表します (1vw はビューポートの幅の 1% を表します)。
## vh: ビューポートの高さのパーセンテージを表します (1vh はビューポートの高さの 1% を表します);
• vmin および vmax: vw および vw の最小値と最大値を表しますそれぞれvh。

たとえば、vw ユニットを使用して Web ページのフォント サイズを設定し、画面の幅に応じて適応的に拡大縮小することができます。例は次のとおりです。

body {

font-size: 2vw;
}

この例では、Web ページ内のすべてのテキストのフォント サイズを次のように設定します。 2vw.これは、ビューポート幅が 1000 ピクセルの場合、フォント サイズは 20 ピクセル、ビューポート幅が 500 ピクセルの場合、フォント サイズは 10 ピクセルであることを意味します。

CSS メディア クエリとビューポート単位の組み合わせを使用する
3. 上記 2 つの方法を組み合わせて使用​​し、異なるビューポート単位を指定して、さまざまな画面サイズにスタイルを設定することもできます。たとえば、次のコードを使用して、デバイスの幅ごとに異なるフォント サイズを設定できます:
   

@media Only screen and (max-width: 480px) {

body {

font-size: 16px;

}

}

@メディアのみの画面と (最小幅: 481 ピクセル) と (最大幅: 768 ピクセル) {

本体 {

font-size: 20px;

}

}

@メディアのみの画面と (min-width: 769px) {

本体 {

font-size: 24px;

}

}

この例では、 @media ルールは、さまざまな画面幅に合わせてフォント サイズを設定する 3 つの異なるメディア クエリを定義します。 480px 以下の画面の場合、フォント サイズは 16px、481px から 768px までの画面の場合、フォント サイズは 20px、幅 769px 以上の画面の場合、フォント サイズは 24px です。

概要

上記の方法により、CSS を使用してブラウザのサイズを設定し、Web ページがさまざまな画面サイズやデバイスの種類に適応できるようにすることができます。このアダプティブ デザインは、ユーザー エクスペリエンスを向上させるだけでなく、Web サイトの使いやすさとアクセシビリティも向上します。

以上がCSSでブラウザのサイズを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。