Artikel Direktori
Kepiye CSS responsif seluler nampilake tata letak responsif layar @media miturut resolusi sing beda?
Artikel ing ngisor iki bakal ngenalake carane nggunakake CSS kanggo nemtokake resolusi sing beda-beda lan nampilake tata letak lebar sing beda kanggo entuk jembar adaptif.
Kanca-kanca sing butuh bisa ngrujuk, muga-muga bisa migunani kanggo kabeh.
Bedane antarane @media lan @media kaca web sablon
- Yen css kudu digunakake ing piranti cetak, gunakake @media, yen ora, gunakake layar @media.
- Nanging, iki ora mesthi bener. Nyatane, yen sampeyan ngganti "layar" karo "print" lan nulis minangka @media print, banjur CSS bisa digunakake ing piranti printing;
- Nanging ati-ati, css sing diumumake dening @media print mung valid ing piranti cetak.
1. DIVCSS gambaran cilik cilik
Kita pisanan nyetel DIV kothak CSS jenenge ".abc", nyetel dhuwur kanggo 300px, lan nyetel wates CSS ireng;
- lan setelan
margin:0 autoTata letak dipusatake, lan rong gaya iki wis disetel supaya gampang dideleng.
Kita nyeret browser kanthi manual kanggo nampilake jembaré, banjur mirsani carane jembaré kothak diganti:
- Nalika ambane browser disetel menyang ambane ora luwih saka 500px, 100px ditampilake sing cocog karo ambane kothak;
- Nalika jembaré browser diatur dadi kurang saka 901px, ".abc" ditampilake cocog karo jembaré kothak, kang nuduhake 200px;
- Nalika ambane browser disetel dadi luwih saka 1201px, ambane obyek kothak ditampilake minangka 1200px;
- Yen kurang saka 1200px, ambane tampilan 900px.
2, kode adaptif terminal seluler CSS seluler
.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 dicathet menawa urutan kode CSS ngeset CSS saka gedhe nganti cilik (menehi ukuran sing luwih gedhe browser, luwih dhuwur ing ngarep).
- Iki amarga hubungan logis, pertimbangan @media babagan debugging CSS bakal nyebabake keputusan kasebut 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>Cathetan: rasio aspek piranti
- piranti-aspek-rasio bisa digunakake kanggo pas piranti karo rasio aspek layar tartamtu, kang uga sifat migunani.
- Contone, kaca kita pengin nemtokake gaya kanggo layar normal kanthi rasio aspek 4:3.
- Banjur kanggo layar lebar 16:9 lan 16:10, nemtokake gaya liyane, kayata jembar adaptif lan jembar tetep:
- Layar mung @media lan (rasio aspek piranti:4/3)
4. Kompatibel karo browser utama HTML+CSS+JS kode 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>Ing ndhuwur yaiku CSS adaptif ponsel, sing nampilake konten rinci responsif layar @media sing beda miturut layar sing beda.
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) Shared "Mobile Adaptive CSS Beda Layar Tampilan Beda @media Layar Responsiveness", kang mbiyantu kanggo sampeyan.
Sugeng rawuh kanggo nuduhake link artikel iki:https://www.chenweiliang.com/cwl-2074.html
Sugeng rawuh ing saluran Telegram blog Chen Weiliang kanggo entuk update paling anyar!
📚 Pandhuan iki ngemot nilai gedhe, 🌟Iki minangka kesempatan langka, aja kantun! ⏰⌛💨
Share lan seneng yen sampeyan seneng!
Nuduhake lan seneng sampeyan minangka motivasi terus-terusan!