Diréktori Tulisan
Kumaha CSS responsif mobile nembongkeun béda @media layouts responsif layar nurutkeun resolusi béda?
Artikel di handap ieu bakal ngenalkeun kumaha ngagunakeun CSS pikeun nangtukeun résolusi anu béda sareng nampilkeun perenah lebar anu béda pikeun ngahontal lebar adaptif.
Rerencangan anu peryogi tiasa ngarujuk, mugia tiasa mangfaat kanggo sadayana.
Beda antara @media sareng @media halaman wéb percetakan layar
- Upami css kedah dianggo dina alat percetakan, paké @media, upami henteu, paké layar @media.
- Sanajan kitu, ieu teu merta leres. Malah, lamun ngaganti "layar" ku "print" jeung nulis salaku @media print, teras CSS bisa dipaké dina alat percetakan;
- Tapi perhatikeun yén css anu dinyatakeun ku @media print ngan valid dina alat percetakan.
1. DIVCSS pedaran bisi leutik
Urang mimiti nyetel kotak DIV CSS ngaranna ".abc", Nyetél jangkungna na 300px, tur nyetel wates CSS kana hideung;
- jeung setélan
margin:0 autoPerenahna dipuseurkeun, sareng dua gaya ieu tos disetel pikeun gampang ditingali.
Urang sacara manual nyered browser pikeun nembongkeun lebar, lajeng niténan kumaha lebar kotak robah:
- Nalika lebar browser disaluyukeun kana lebar teu leuwih ti 500px, 100px dipintonkeun luyu jeung lebar kotak;
- Nalika lebar browser disaluyukeun janten kirang ti 901px, ".abc" dipintonkeun pakait jeung lebar kotak, nu mintonkeun 200px;
- Nalika lebar browser disaluyukeun janten langkung ageung tibatan 1201px, lebar kotak obyék nunjukkeun 1200px;
- Nalika éta kirang ti 1200px, lebar tampilan 900px.
2, CSS mobile telepon sélulér kode adaptif
.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宽度 */- Ieu kudu dicatet yén urutan kode CSS ieu typesetting CSS ti badag ka leutik (ditilik yén badag lebar browser, nu leuwih luhur hareup).
- Ieu kusabab hubungan logis, @media's judgment of CSS debugging bakal ngabalukarkeun judgment 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>Catetan: alat-aspék rasio
- alat-aspék-ratio bisa dipaké pikeun nyocogkeun alat jeung rasio aspék layar husus, nu oge sipat mangpaat.
- Contona, kaca urang hayang nangtukeun gaya pikeun layar normal kalawan rasio aspék 4:3.
- Teras pikeun layar lebar 16:9 sareng 16:10, tangtukeun gaya anu sanés, sapertos lebar adaptif sareng lebar tetep:
- @media wungkul layar jeung (alat-aspék-rasio:4/3)
4. Cocog sareng panyungsi utama HTML + CSS + kode sumber 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 luhur mangrupikeun CSS adaptif terminal sélulér, anu nampilkeun béda-béda layar @media eusi detil responsif dumasar kana layar anu béda.
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) Dibagikeun "Mobile Adaptive CSS Beda Layar Témbongkeun Béda @media Screen Responsiveness", nu mantuan anjeun.
Wilujeng ngabagikeun tautan artikel ieu:https://www.chenweiliang.com/cwl-2074.html
Wilujeng sumping di saluran Telegram blog Chen Weiliang pikeun kéngingkeun apdet panganyarna!
📚 Pituduh ieu ngandung nilai anu ageung, 🌟Ieu mangrupikeun kasempetan anu jarang, tong kantun! ⏰⌛💨
Bagikeun sareng suka upami anjeun resep!
Bagikeun sareng resep anjeun mangrupikeun motivasi kontinyu kami!