Direktori Artikel
Bagaimana CSS responsif seluler menampilkan tata letak responsif layar @media yang berbeda sesuai dengan resolusi yang berbeda?
Artikel berikut akan memperkenalkan cara menggunakan CSS untuk menentukan resolusi yang berbeda dan menampilkan tata letak lebar yang berbeda untuk mencapai lebar adaptif.
Teman-teman yang membutuhkan bisa merujuknya, semoga bermanfaat untuk semuanya.
Perbedaan antara halaman web sablon @media dan @media
- Jika css perlu digunakan di perangkat pencetakan, gunakan @media, jika tidak, gunakan layar @media.
- Namun, ini belum tentu benar. Faktanya, jika Anda mengganti "layar" dengan "cetak" dan menulisnya sebagai @media print, maka CSS dapat digunakan pada perangkat pencetakan;
- Tetapi perhatikan bahwa css yang dideklarasikan oleh @media print hanya valid pada perangkat pencetakan.
1. Deskripsi kasus kecil DIVCSS
Pertama-tama kita atur kotak DIV CSS bernama ".abc", atur tingginya menjadi 300px, dan atur batas CSS menjadi hitam;
- dan pengaturan
margin:0 autoTata letaknya berada di tengah, dan kedua gaya ini telah diatur sebelumnya agar mudah dilihat.
Kami menyeret browser secara manual untuk menampilkan lebar, dan kemudian mengamati bagaimana lebar kotak berubah:
- Ketika lebar browser disesuaikan dengan lebar tidak lebih dari 500px, 100px ditampilkan sesuai dengan lebar kotak;
- Ketika lebar browser disesuaikan menjadi kurang dari 901px, ".abc" ditampilkan sesuai dengan lebar kotak, yang menampilkan 200px;
- Ketika lebar browser disesuaikan menjadi lebih besar dari 1201px, lebar objek kotak akan menampilkan 1200px;
- Jika kurang dari 1200px, lebar tampilan adalah 900px.
2, kode adaptif terminal seluler ponsel 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 dicatat bahwa urutan kode CSS adalah pengaturan huruf CSS dari besar ke kecil (dilihat bahwa semakin besar lebar browser, semakin tinggi bagian depan).
- Ini karena hubungan logis, penilaian @media tentang debugging CSS akan menyebabkan penilaian gagal.
3. kode 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>Catatan: rasio aspek perangkat
- device-aspect-ratio dapat digunakan untuk menyesuaikan perangkat dengan rasio aspek layar tertentu, yang juga merupakan properti yang berguna.
- Misalnya, halaman kami ingin menentukan gaya untuk layar normal dengan rasio aspek 4:3.
- Kemudian untuk layar lebar 16:9 dan 16:10, tentukan gaya lain, seperti lebar adaptif dan lebar tetap:
- @media hanya layar dan (perangkat-aspek-rasio:4/3)
4. Kompatibel dengan browser utama kode sumber HTML+CSS+JS
<!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 adalah CSS adaptif ponsel, yang menampilkan konten detail responsif layar @media yang berbeda sesuai dengan layar yang berbeda.
Harapan Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Berbagi "CSS Adaptif Seluler Layar Berbeda Menampilkan Responsivitas Layar @media yang Berbeda", yang berguna bagi Anda.
Selamat datang untuk membagikan tautan artikel ini:https://www.chenweiliang.com/cwl-2074.html
Selamat datang di saluran Telegram blog Chen Weiliang untuk mendapatkan pembaruan terkini!
📚 Panduan ini mengandung nilai yang sangat besar, 🌟Ini adalah kesempatan langka, jangan sampai terlewatkan! ⏰⌛💨
Bagikan dan sukai jika Anda suka!
Berbagi dan suka Anda adalah motivasi berkelanjutan kami!