Anyè Atik
Ki jan CSS ki reponn mobil yo montre diferan plan @media ekran ki reponn selon diferan rezolisyon?
Atik sa a pral prezante kijan pou itilize CSS pou detèmine rezolisyon diferan epi montre diferan layout lajè pou reyalize lajè adaptasyon.
Zanmi ki nan bezwen yo ka refere li, mwen espere ke li pral itil pou tout moun.
Diferans ant @media ak @media paj wèb ekran enprime
- Si css la bezwen itilize nan yon aparèy enprime, sèvi ak @media, otreman, sèvi ak @media ekran.
- Sepandan, sa a pa nesesèman vre.An reyalite, si ou ranplase "screen" ak "print" epi ekri li kòm @media print, Lè sa a, CSS la ka itilize sou aparèy enprime a;
- Men, sonje ke css te deklare pa @media print sèlman valab sou aparèy enprime.
1. DIVCSS ti ka deskripsyon
Nou premye mete yon bwat DIV CSS yo te rele ".abc", mete wotè li a 300px, epi mete fwontyè CSS a nwa;
- ak paramèt
margin:0 autoLayout la santre, ak de estil sa yo pre-mete pou gade fasil.
Nou manyèlman trennen navigatè a pou montre lajè a, ak Lè sa a, obsève ki jan lajè bwat la chanje:
- Lè yo ajiste lajè navigatè a ak yon lajè ki pa plis pase 500px, 100px parèt ki koresponn ak lajè bwat la;
- Lè yo ajiste lajè navigatè a pou mwens pase 901px, ".abc" parèt ki koresponn ak lajè bwat la, ki montre 200px;
- Lè lajè navigatè a ajiste pou li pi gran pase 1201px, lajè objè bwat la montre 1200px;
- Lè li se mwens pase 1200px, lajè ekspozisyon an se 900px.
2, CSS telefòn mobil tèminal mobil adaptasyon kòd
.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宽度 */- Li ta dwe remake ke lòd kòd CSS la se konpoze CSS soti nan gwo a piti (jije ke pi gwo lajè navigatè a, se pi wo devan an).
- Sa a se akòz relasyon ki lojik la, jijman @media nan debogaj CSS pral lakòz jijman an echwe.
3. HTML kòd
<!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>Nòt: aparèy-aspè-rapò
- aparèy-aspect-rapò ka itilize pou anfòm aparèy ki gen rapò espesifik aspè ekran, ki se tou yon pwopriyete itil.
- Pou egzanp, paj nou an vle defini yon style pou ekran nòmal ak yon rapò aspè 4:3.
- Lè sa a, pou 16:9 ak 16:10 widescreen, defini yon lòt style, tankou lajè adaptasyon ak lajè fiks:
- @medya sèlman ekran ak (aspect-aspect-rapò: 4/3)
4. konpatib ak gwo navigatè HTML + CSS + JS sous kòd
<!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>Pi wo a se tèminal mobil adaptasyon CSS la, ki montre diferan @media ekran repons detaye kontni selon ekran diferan.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Pataje "Mobile Adaptive CSS Diferan Ekran Montre Diferan @Medya Ekran Responsive", ki itil pou ou.
Byenvini pataje lyen atik sa a:https://www.chenweiliang.com/cwl-2074.html
Byenveni nan chanèl Telegram blog Chen Weiliang a pou jwenn dènye mizajou yo!
📚 Gid sa a gen anpil valè, 🌟Sa a se yon opòtinite ki ra, pa rate li! ⏰⌛💨
Pataje epi like siw renmen!
Pataje w ak renmen ou se motivasyon kontinyèl nou!