フルスクリーンを実現するCSS

CSS (Cascading Style Sheets) は、Web ページの外観とスタイルを記述するために使用されるマークアップ言語です。 HTML ドキュメントにスタイル、レイアウト、インタラクティブな効果を追加できます。フロントエンド開発では、フルスクリーン効果を実現する必要があることがよくありますが、この記事では、CSS を使用してフルスクリーン効果を実現する方法を紹介します。

1. フルスクリーン属性

フルスクリーン属性 (フルスクリーン API) は CSS3 で導入され、開発者が Web ページ上の一部の要素またはページ全体をフルスクリーンで表示できるようにします。 。フルスクリーン属性を使用すると、ブラウザ ウィンドウが全画面表示のときに特定の操作を実行できます。この属性を使用すると、Web プログラムでより優れたユーザー エクスペリエンスを実現できます。

この属性の構文は次のとおりです。

element:fullscreen{
    /*全屏样式*/
}

ユーザーが全画面キーを押すか、その他の標準的な全画面操作を実行すると、要素はブラウザによって全体を埋めるように拡大されます。画面。全画面状態を終了すると、要素は元のサイズと位置に戻ります。

全画面属性は、Chrome、Firefox、Safari、IE11 などのサポートされているブラウザでのみ認識できることに注意してください。

2. 全画面効果の実現

以下では、全画面 API を使用して、個々の要素の全画面とページ全体の全画面を実現する方法を示します。

1. 個々の要素に全画面表示を実装する

まず、HTML で全画面表示する必要がある要素を追加します (例:

<div id="fullscreen">
    ...
</div>

次に、 CSS スタイルの次のコード:

#fullscreen {
    width: 100%;
    height: 100%;
}

#fullscreen:fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #fff; /*全屏时的背景色*/
}

コードでは、まず要素の幅と高さを 100% に設定します。次に、要素の位置が親要素ではなくブラウザ ウィンドウに基づいて決定されるように、要素を固定位置 (position:fixed) に設定するなど、追加のスタイルがフルスクリーン属性 (:fullscreen) に追加されました。また、要素の幅と高さを 100% に設定します。最後に、全画面要素を他の要素の上に配置するには、z-index を 999 に設定します。さらに、追加のスタイルを追加して、全画面表示時の背景色、フォント、その他のスタイルを変更できます。

2. ページ全体の全画面効果を実現するには

ページ全体の全画面効果を実現するには、HTML 要素と body 要素に全画面スタイルを追加できます。 ##

html:fullscreen, 
body:fullscreen {
    height: 100%;
    overflow: hidden;
}

以上がフルスクリーンを実現するCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。