css untuk mencapai skrin penuh

CSS (Cascading Style Sheets) ialah bahasa penanda yang digunakan untuk menerangkan rupa dan gaya halaman web. Ia boleh menambah gaya, reka letak dan kesan interaktif pada dokumen HTML. Dalam pembangunan bahagian hadapan, selalunya perlu untuk mencapai kesan skrin penuh Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan skrin penuh.

1. Atribut skrin penuh

Atribut skrin penuh (Fullscreen API) telah diperkenalkan dalam CSS3, yang membolehkan pembangun memaparkan beberapa elemen atau keseluruhan halaman dalam skrin penuh dalam halaman web . Melalui atribut skrin penuh, anda boleh melakukan operasi tertentu apabila tetingkap penyemak imbas adalah skrin penuh Menggunakan atribut ini boleh membolehkan program web mencapai pengalaman pengguna yang lebih baik.

Sintaks untuk atribut ini adalah seperti berikut:

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

Apabila pengguna menekan kekunci skrin penuh atau melakukan operasi skrin penuh standard lain, elemen akan dibesarkan oleh penyemak imbas untuk mengisi keseluruhan skrin. Apabila keluar dari keadaan skrin penuh, elemen kembali ke saiz dan kedudukan asalnya.

Perlu diambil perhatian bahawa atribut skrin penuh hanya dikenali oleh penyemak imbas yang disokong, termasuk Chrome, Firefox, Safari dan IE11.

2. Mencapai kesan skrin penuh

Di bawah kami akan menunjukkan cara menggunakan API skrin penuh untuk mencapai skrin penuh untuk elemen individu dan skrin penuh untuk keseluruhan halaman.

1. Laksanakan skrin penuh untuk elemen individu

Mula-mula, tambahkan elemen yang perlu dipaparkan skrin penuh dalam HTML, contohnya:

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

Kemudian, tambahkan yang berikut kod dalam gaya CSS:

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

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

Dalam kod, mula-mula tetapkan lebar dan ketinggian elemen kepada 100%. Seterusnya, penggayaan tambahan telah ditambahkan pada atribut skrin penuh (:fullscreen), termasuk menetapkan elemen kepada kedudukan tetap (position:fixed) supaya kedudukannya berdasarkan tetingkap penyemak imbas dan bukannya elemen induk. Tetapkan juga lebar dan ketinggian elemen kepada 100%. Akhir sekali, untuk meletakkan elemen skrin penuh di atas elemen lain, tetapkan indeks z kepada 999. Selain itu, gaya tambahan boleh ditambah untuk menukar warna latar belakang, fon dan gaya lain apabila skrin penuh.

2 Untuk mencapai kesan skrin penuh bagi keseluruhan halaman

Untuk mencapai kesan skrin penuh bagi keseluruhan halaman, anda boleh menambah gaya skrin penuh pada HTML dan elemen badan:

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

Di sini kedua-dua elemen ditetapkan ke skrin penuh, kemudian tetapkan ketinggiannya kepada 100%. Selain itu, untuk menghalang bar skrol daripada muncul dalam mod skrin penuh, tetapkan atribut limpahan kepada tersembunyi. Dengan cara ini, apabila pengguna menekan kekunci skrin penuh dalam penyemak imbas, keseluruhan halaman akan dibesarkan agar sesuai dengan saiz skrin.

Perlu diambil perhatian bahawa apabila menggunakan API skrin penuh, penyemak imbas mungkin melumpuhkan fungsi automain, seperti automain audio dan video. Selain itu, acara papan kekunci dan tetikus mungkin berbeza dalam mod skrin penuh.

3. Ringkasan

CSS sangat mudah untuk mencapai kesan skrin penuh, cuma tambahkan beberapa sifat CSS. Anda boleh menggunakan API skrin penuh untuk menetapkan elemen dalam halaman web untuk dipaparkan dalam skrin penuh untuk memberikan pengalaman pengguna yang lebih baik. Perlu diingatkan bahawa atribut skrin penuh hanya sah dalam penyemak imbas yang disokong, dan mungkin terdapat beberapa sekatan dalam keadaan skrin penuh.

Atas ialah kandungan terperinci css untuk mencapai skrin penuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!