Isalathiso senqaku
Ngaba i-CSS ephendulayo yeselula ibonisa njani i-@media screen ephendulayo uyilo ngokwezisombululo ezahlukeneyo?
Inqaku elilandelayo liza kwazisa indlela yokusebenzisa i-CSS ukumisela izisombululo ezahlukeneyo kunye nokubonisa ububanzi obuhlukeneyo bokufezekisa ububanzi obuguqukayo.
Abahlobo abasweleyo banokubhekisa kuyo, ndiyathemba ukuba iya kuba luncedo kuye wonke umntu.
Umahluko phakathi kwe-@media kunye ne-@media screen eprinta amaphepha ewebhu
- Ukuba i-css ifuna ukusetyenziswa kwisixhobo sokushicilela, sebenzisa i-@media, kungenjalo, sebenzisa isikrini se-@media.
- Nangona kunjalo, oku akuyonyani ngokuqinisekileyo, ukuba ususa "isikrini" ngo "print" kwaye uyibhale njenge-@media print, ngoko ke i-CSS ingasetyenziswa kwisixhobo sokushicilela;
- Kodwa qaphela ukuba i-css ebhengezwe ngu-@media print isebenza kuphela kwizixhobo zoshicilelo.
1. DIVCSS inkcazo yetyala elincinci
Siqale siseta ibhokisi ye-DIV CSS egama lingu ".abc", isete ubude bayo ukuya kwi-300px, kwaye isete umda weCSS ube mnyama;
- kunye nezicwangciso
margin:0 autoUyilo lusembindini, kwaye ezi ndlela zimbini zisetwe kwangaphambili ukuze zijongwe lula.
Sitsala ngesandla isikhangeli ukubonisa ububanzi, kwaye sijonge ukuba ububanzi bebhokisi butshintsha njani:
- Xa ububanzi besiphequluli bulungelelaniswa kububanzi obungekho ngaphezu kwe-500px, i-100px iboniswa ngokuhambelana nobubanzi bebhokisi;
- Xa ububanzi besiphequluli bulungelelaniswa ukuba bube ngaphantsi kwe-901px, ".abc" iboniswa ngokuhambelana nobubanzi bebhokisi, ebonisa i-200px;
- Xa ububanzi besikhangeli bulungelelaniswa ukuba bube bukhulu kuno 1201px, ububanzi bento yebhokisi bubonisa 1200px;
- Xa ingaphantsi kwe-1200px, ububanzi bomboniso yi-900px.
2, CSS mobile phone terminal ikhowudi adaptive
.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宽度 */- Kufuneka kuqatshelwe ukuba ikhowudi yekhowudi ye-CSS icwangcisa i-CSS ukusuka kwinkulu ukuya kwencinci (ukugweba ukuba ubukhulu bobubanzi besikhangeli, buphezulu ngaphambili).
- Oku kungenxa yobudlelwane obunengqiqo, umgwebo we-@media we-CSS debugging uya kubangela ukuba isigwebo singaphumeleli.
3. ikhowudi ye-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>Qaphela: isixhobo-aspect-ratio
- isixhobo-inkalo-retiyo ingasetyenziselwa ukulinganisa izixhobo ezinomlinganiselo othile weskrini, ekwayipropathi eluncedo.
- Umzekelo, iphepha lethu lifuna ukuchaza isitayile sezikrini eziqhelekileyo ezinomlinganiselo we-4:3.
- Ke ngo-16:9 kunye no-16:10 isikrini esibanzi, chaza esinye isimbo, esifana nobubanzi obuguqukayo kunye nobubanzi obumiselweyo:
- @media kuphela isikrini kunye (isixhobo-umzobo-umlinganiselo:4/3)
4. Iyahambelana neziphequluli eziphambili ze-HTML+CSS+JS ikhowudi yomthombo
<!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>Oku kungasentla yi-CSS eguqukayo yefowuni ephathwayo, ebonisa okwahlukileyo @media isikrini esiphendula umxholo oneenkcukacha ngokwezikrini ezahlukeneyo.
Ndiyathemba Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Kwabiwe "I-Mobile Adaptive CSS Izikrini Ezahlukeneyo Zibonisa Ezahlukeneyo @media Ukuphendula kweSkrini", eluncedo kuwe.
Wamkelekile ukwabelana ngekhonkco leli nqaku:https://www.chenweiliang.com/cwl-2074.html
Wamkelekile kwisitishi seTelegram sebhlog kaChen Weiliang ukufumana uhlaziyo lwamva nje!
📚 Esi sikhokelo sinexabiso elikhulu, 🌟Eli lithuba elinqabileyo, ungaliphoswa! ⏰⌛💨
Yabelana kwaye uthanda ukuba uyathanda!
Ukwabelana kwakho kunye nezinto ozithandayo ziyinkuthazo yethu eqhubekayo!