Bagaimana untuk menetapkan saiz pelayar dengan css

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menerangkan gaya halaman web CSS boleh digunakan untuk menetapkan gaya reka letak, fon, warna, latar belakang dan elemen lain dalam halaman web. Antaranya, cara menetapkan saiz pelayar juga boleh dicapai melalui CSS.

Apabila menulis gaya CSS, anda boleh menggunakan peraturan "@media" untuk menentukan pertanyaan media dengan saiz yang berbeza untuk menggunakan gaya yang berbeza mengikut saiz skrin dan jenis peranti. Kaedah ini boleh mengubah reka letak dan reka letak halaman untuk mencapai kesan paparan terbaik pada saiz skrin yang berbeza.

Berikut ialah beberapa cara untuk menetapkan saiz penyemak imbas melalui CSS:

1. Menggunakan pertanyaan media
   Peraturan @media ialah ciri baharu CSS3 yang boleh berdasarkan lebar skrin atau ketinggian untuk menetapkan gaya yang berbeza. Melalui pertanyaan media, gaya khusus boleh ditetapkan untuk peranti yang berbeza Contohnya adalah seperti berikut:

@skrin media dan (lebar maksimum: 480px) {
badan {

background-color: yellow;

}
}

@media sahaja skrin dan (lebar min: 481px) dan (lebar maksimum: 768px) {
badan {

background-color: blue;

}
}

@media sahaja skrin dan (lebar min: 769px) {
badan {

background-color: green;

}
}

Dalam ini contoh , kami menggunakan peraturan @media untuk mentakrifkan tiga pertanyaan media yang berbeza. Setiap pertanyaan media mempunyai lebar skrin maksimum atau minimum yang digunakan untuk menentukan masa untuk menggunakan gaya. Dalam kod di atas, kami mentakrifkan warna latar belakang untuk tiga lebar skrin yang berbeza: warna latar belakang skrin dengan lebar kurang daripada atau sama dengan 480px adalah kuning, warna latar belakang skrin dengan lebar antara 481px dan 768px adalah biru, dan warna latar belakang skrin dengan lebar lebih besar daripada atau sama dengan 769px Warna latar belakang skrin berwarna hijau.

2. Menggunakan unit port pandangan CSS
   Unit port pandangan CSS merujuk kepada unit relatif kepada port pandangan (port pandangan), yang boleh digayakan secara berbeza mengikut saiz skrin. Viewport merujuk kepada saiz kawasan yang boleh dilihat pada penyemak imbas Contohnya, apabila anda membuka halaman web dalam penyemak imbas, kawasan yang anda lihat ialah Viewport.

Berikut ialah beberapa unit viewport yang biasa digunakan:

• vw: mewakili peratusan lebar viewport (1vw mewakili 1% daripada lebar viewport); >
vh: mewakili peratusan ketinggian viewport (1vh mewakili 1% ketinggian viewport);
• vmin dan vmax: mewakili nilai minimum dan maksimum ​​​​dalam vw dan vh masing-masing.

Sebagai contoh, kita boleh menggunakan unit vw untuk menetapkan saiz fon dalam halaman web supaya skala menyesuaikan dengan lebar skrin. Contohnya adalah seperti berikut:

body {

font-size: 2vw;
}

Dalam contoh ini, kami menetapkan saiz fon semua teks dalam halaman web kepada 2vw. Ini bermakna bahawa dengan lebar viewport 1000px saiz fon ialah 20px dan dengan lebar viewport 500px saiz fon ialah 10px.

Gunakan gabungan pertanyaan media CSS dan unit port pandangan
3. Kami juga boleh menggabungkan dua kaedah di atas untuk menetapkan gaya untuk saiz skrin yang berbeza dengan menentukan unit port pandangan yang berbeza. Sebagai contoh, kita boleh menetapkan saiz fon yang berbeza untuk lebar peranti yang berbeza dengan kod berikut:
   

@media sahaja skrin dan (lebar maksimum: 480px) {

badan {

font-size: 16px;

}

}

@media sahaja skrin dan (lebar min: 481px) dan (lebar maksimum: 768px) {

badan {

font-size: 20px;

}

}

@media sahaja skrin dan (lebar min: 769px) {

badan {

font-size: 24px;

}

}

dalam Dalam contoh ini, kami menggunakan peraturan @media untuk menentukan tiga pertanyaan media yang berbeza untuk menetapkan saiz fon untuk lebar skrin yang berbeza. Untuk skrin 480px atau kurang, saiz fon ialah 16px untuk skrin antara 481px dan 768px, saiz fon ialah 20px untuk skrin dengan lebar 769px atau lebih, saiz fon ialah 24px;

Ringkasan

Melalui kaedah di atas, kami boleh menggunakan CSS untuk menetapkan saiz penyemak imbas supaya halaman web boleh menyesuaikan diri dengan saiz skrin dan jenis peranti yang berbeza. Reka bentuk penyesuaian ini bukan sahaja meningkatkan pengalaman pengguna, tetapi juga meningkatkan kebolehgunaan dan kebolehcapaian tapak web.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan saiz pelayar dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!