フルスクリーンを実現する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;
}

ここでは、両方の要素が全画面に設定され、高さが 100% に設定されています。さらに、全画面モードでスクロール バーが表示されないようにするには、オーバーフロー属性を非表示に設定します。これにより、ユーザーがブラウザで全画面キーを押すと、ページ全体が画面サイズに合わせて拡大されます。

全画面 API を使用する場合、ブラウザによってオーディオやビデオの自動再生などの自動再生機能が無効になる場合があることに注意してください。さらに、キーボードとマウスのイベントは全画面モードでは異なる場合があります。

3. 概要

CSS は、いくつかの CSS プロパティを追加するだけで、全画面効果を実現するのに非常に簡単です。全画面 API を使用して、Web ページ内の要素を全画面で表示するように設定し、ユーザー エクスペリエンスを向上させることができます。フルスクリーン属性はサポートされているブラウザでのみ有効であり、フルスクリーン状態ではいくつかの制限がある場合があることに注意してください。

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