Uhla lwemibhalo ye-athikili
Ingabe i-CSS ephendulayo yeselula ibonisa kanjani izakhiwo ezisabelayo zesikrini se-@media ngokwezinqumo ezihlukene?
Isihloko esilandelayo sizokwethula indlela yokusebenzisa i-CSS ukuze kunqunywe izinqumo ezihlukene futhi kuboniswe izakhiwo ezihlukene zobubanzi ukuze kuzuzwe ububanzi obuguquguqukayo.
Abangane abadinga usizo bangabhekisela kukho, ngithemba ukuthi kuzoba usizo kuwo wonke umuntu.
Umehluko phakathi kwe-@media kanye namakhasi ewebhu okuphrinta isikrini se-@media
- Uma i-css idinga ukusetshenziswa kudivayisi yokuphrinta, sebenzisa i-@media, ngaphandle kwalokho, sebenzisa isikrini se-@media.
- Nokho, lokhu akulona iqiniso ngempela. Eqinisweni, uma ushintsha "isikrini" ngokuthi "phrinta" futhi usibhale njengokuphrinta kwe-@media, i-CSS ingasetshenziswa kudivayisi yokuphrinta;
- Kodwa qaphela ukuthi i-css emenyezelwe yi-@media print isebenza kuphela kumadivayisi okuphrinta.
1. Incazelo yecala elincane le-DIVCSS
Siqale sisethe ibhokisi le-DIV CSS eliqanjwe ngokuthi ".abc", setha ubude balo ku-300px, bese setha umngcele we-CSS ube mnyama;
- kanye nezilungiselelo
margin:0 autoIsakhiwo simaphakathi, futhi lezi zitayela ezimbili zisethwe kusengaphambili ukuze zibukwe kalula.
Sihudula isiphequluli mathupha ukuze sibonise ububanzi, bese sibona ukuthi ububanzi bebhokisi bushintsha kanjani:
- Uma ububanzi besiphequluli bulungiswa kububanzi obungeqi ku-500px, u-100px uyavezwa ohambisana nobubanzi bebhokisi;
- Uma ububanzi besiphequluli bulungiswa ukuze bube ngaphansi kuka-901px, i-".abc" iyaboniswa ihambisana nobubanzi bebhokisi, elibonisa u-200px;
- Uma ububanzi besiphequluli bulungiswa ukuze bube bukhulu kuno-1201px, ububanzi bento yebhokisi bubonisa 1200px;
- Uma ingaphansi kuka-1200px, ububanzi bokuboniswa bungu-900px.
2, i-CSS umakhalekhukhwini ikhodi evumelana nezimo
.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宽度 */- Kufanele kuqashelwe ukuthi i-oda lekhodi ye-CSS lihlela i-CSS ukusuka kwenkulu kuye kwencane (uma sibheka ukuthi ububanzi besiphequluli bukhulu, ingaphambili liyaphakama).
- Lokhu kungenxa yobudlelwano obunengqondo, ukwahlulela kwe-@media kokulungisa iphutha kwe-CSS kuzobangela ukuthi isahlulelo sihluleke.
3. Ikhodi 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: idivayisi-aspect-ratio
- I-device-aspect-ratio ingasetshenziswa ukuze kulingane amadivayisi ane-aspect ratio ethize yesikrini, nayo eyimpahla ewusizo.
- Isibonelo, ikhasi lethu lifuna ukuchaza isitayela sezikrini ezijwayelekile ezine-aspect ratio engu-4:3.
- Bese ku-16:9 kanye no-16:10 isikrini esibanzi, chaza esinye isitayela, esifana nobubanzi obuguqukayo nobubanzi obugxilile:
- Isikrini se-@media kuphela futhi (i-device-aspect-ratio:4/3)
4. Ihambisana neziphequluli ezinkulu HTML+CSS+JS ikhodi 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>Okungenhla i-CSS eguquguqukayo yeselula, ebonisa okuqukethwe okunemininingwane okusabela kwesikrini se-@media ngokuya ngezikrini ezihlukene.
I-Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Kwabiwe "Izikrini Ezihlukile Ze-CSS Eziguqukayo Zibonisa Okuhlukile @media Ukusabela Kwesikrini", okuwusizo kuwe.
Siyakwamukela ukwabelana ngesixhumanisi salesi sihloko:https://www.chenweiliang.com/cwl-2074.html
Uyemukelwa esiteshini seTelegram sebhulogi ka-Chen Weiliang ukuze uthole izibuyekezo zakamuva!
📚 Lo mhlahlandlela uqukethe inani elikhulu, 🌟Leli ithuba eliyivelakancane, ungaphuthelwa! ⏰⌛💨
Yabelana futhi uthanda uma uthanda!
Ukwabelana kwakho nokuthanda kwakho kuyisisusa sethu esiqhubekayo!