Direktori Artikel
Bagaimanakah CSS responsif mudah alih memaparkan reka letak responsif skrin @media yang berbeza mengikut resolusi yang berbeza?
Artikel berikut akan memperkenalkan cara menggunakan CSS untuk menentukan resolusi yang berbeza dan memaparkan reka letak lebar yang berbeza untuk mencapai lebar penyesuaian.
Rakan-rakan yang memerlukan boleh merujuknya, semoga bermanfaat untuk semua.
Perbezaan antara laman web percetakan skrin @media dan @media
- Jika css perlu digunakan dalam peranti percetakan, gunakan @media, jika tidak, gunakan skrin @media.
- Walau bagaimanapun, ini tidak semestinya benar. Malah, jika anda menggantikan "skrin" dengan "cetak" dan menulisnya sebagai cetakan @media, maka CSS boleh digunakan pada peranti percetakan;
- Tetapi ambil perhatian bahawa css yang diisytiharkan oleh @media print hanya sah pada peranti percetakan.
1. huraian kes kecil DIVCSS
Kami mula-mula menetapkan kotak DIV CSS bernama ".abc", tetapkan ketinggiannya kepada 300px dan tetapkan sempadan CSS kepada hitam;
- dan tetapan
margin:0 autoReka letak adalah berpusat, dan kedua-dua gaya ini telah ditetapkan untuk tontonan mudah.
Kami menyeret penyemak imbas secara manual untuk memaparkan lebar, dan kemudian perhatikan bagaimana lebar kotak berubah:
- Apabila lebar penyemak imbas dilaraskan kepada lebar tidak lebih daripada 500px, 100px dipaparkan sepadan dengan lebar kotak;
- Apabila lebar penyemak imbas dilaraskan kepada kurang daripada 901px, ".abc" dipaparkan sepadan dengan lebar kotak, yang memaparkan 200px;
- Apabila lebar penyemak imbas dilaraskan menjadi lebih besar daripada 1201px, lebar objek kotak memaparkan 1200px;
- Apabila kurang daripada 1200px, lebar paparan ialah 900px.
2, kod penyesuaian terminal mudah alih telefon bimbit CSS
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- Perlu diingatkan bahawa susunan kod CSS menetapkan CSS daripada besar kepada kecil (menilai bahawa lebih besar lebar pelayar, lebih tinggi bahagian hadapan).
- Ini kerana hubungan logik, pertimbangan @media tentang penyahpepijatan CSS akan menyebabkan penghakiman gagal.
3. Kod HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>Nota: nisbah aspek peranti
- nisbah aspek peranti boleh digunakan untuk memuatkan peranti dengan nisbah bidang skrin tertentu, yang juga merupakan sifat berguna.
- Sebagai contoh, halaman kami ingin menentukan gaya untuk skrin biasa dengan nisbah bidang 4:3.
- Kemudian untuk skrin lebar 16:9 dan 16:10, tentukan gaya lain, seperti lebar penyesuaian dan lebar tetap:
- Skrin @media sahaja dan (nisbah aspek-peranti:4/3)
4. Serasi dengan pelayar utama HTML+CSS+JS kod sumber
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>Di atas ialah CSS adaptif telefon mudah alih, yang memaparkan kandungan terperinci responsif skrin @media yang berbeza mengikut skrin yang berbeza.
Blog Harapan Chen Weiliang ( https://www.chenweiliang.com/ ) Kongsi "Skrin Berbeza CSS Adaptif Mudah Alih Memaparkan Responsif Skrin @media Berbeza", yang membantu anda.
Selamat datang untuk berkongsi pautan artikel ini:https://www.chenweiliang.com/cwl-2074.html
Selamat datang ke saluran Telegram blog Chen Weiliang untuk mendapatkan kemas kini terkini!
📚 Panduan ini mengandungi nilai yang besar, 🌟Ini adalah peluang yang jarang berlaku, jangan lepaskan! ⏰⌛💨
Share dan like jika anda suka!
Perkongsian dan suka anda adalah motivasi berterusan kami!