Ìwé Directory
Bawo ni CSS ti n ṣe idahun alagbeka ṣe ṣe afihan oriṣiriṣi @media awọn ipilẹ idahun iboju ni ibamu si awọn ipinnu oriṣiriṣi?
Nkan ti o tẹle yoo ṣafihan bi o ṣe le lo CSS lati pinnu awọn ipinnu oriṣiriṣi ati ṣafihan awọn ipalemo iwọn oriṣiriṣi lati ṣaṣeyọri iwọn adaṣe.
Awọn ọrẹ ti o nilo le tọka si, Mo nireti pe yoo jẹ iranlọwọ fun gbogbo eniyan.
Iyatọ laarin @media ati @media iboju titẹ oju-iwe ayelujara
- Ti css nilo lati lo ninu ẹrọ titẹ sita, lo @media, bibẹẹkọ, lo @media iboju.
- Sibẹsibẹ, eyi kii ṣe otitọ ni otitọ, ni otitọ, ti o ba rọpo “iboju” pẹlu “tẹjade” ti o ko si bi @media print, lẹhinna CSS le ṣee lo lori ẹrọ titẹ;
- Ṣugbọn ṣe akiyesi pe css ti a kede nipasẹ @media Print jẹ wulo lori awọn ẹrọ titẹ nikan.
1. DIVCSS kekere apejuwe
A kọkọ ṣeto apoti DIV CSS ti a npè ni ".abc", ṣeto giga rẹ si 300px, ati ṣeto aala CSS si dudu;
- ati awọn eto
margin:0 autoIfilelẹ naa ti dojukọ, ati pe awọn aza meji wọnyi ti ṣeto tẹlẹ fun wiwo irọrun.
A fa ẹrọ aṣawakiri pẹlu ọwọ lati ṣafihan iwọn naa, lẹhinna ṣe akiyesi bii iwọn ti apoti ṣe yipada:
- Nigbati iwọn ti ẹrọ aṣawakiri ba wa ni titunse si iwọn ti ko ju 500px, 100px han ni ibamu si iwọn ti apoti;
- Nigbati iwọn ti ẹrọ aṣawakiri ba wa ni titunse lati kere ju 901px, “.abc” yoo han ni ibamu si iwọn ti apoti, eyiti o ṣafihan 200px;
- Nigbati iwọn ẹrọ aṣawakiri ba wa ni titunse lati tobi ju 1201px, iwọn ohun apoti naa han 1200px;
- Nigbati o ba kere ju 1200px, iwọn ifihan jẹ 900px.
2, CSS foonu alagbeka mobile ebute koodu 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宽度 */- O yẹ ki o ṣe akiyesi pe aṣẹ koodu CSS ti n tẹ CSS lati nla si kekere (dajọ pe bi iwọn aṣawakiri ba tobi, iwaju ga julọ).
- Eyi jẹ nitori ibatan ọgbọn, idajọ @media ti n ṣatunṣe aṣiṣe CSS yoo jẹ ki idajọ kuna.
3. HTML koodu
<!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>Akiyesi: ẹrọ-aspect-ipin
- ẹrọ-aspect-ratio le ṣee lo lati fi ipele ti awọn ẹrọ pẹlu kan pato iboju ipin, eyi ti o jẹ tun kan wulo ohun ini.
- Fun apẹẹrẹ, oju-iwe wa fẹ lati ṣalaye ara fun awọn iboju deede pẹlu ipin abala ti 4: 3.
- Lẹhinna fun 16:9 ati 16:10 iboju fife, ṣalaye ara miiran, gẹgẹbi iwọn adaṣe ati iwọn ti o wa titi:
- @media nikan iboju ati (ipin-ipin-ẹrọ: 4/3)
4. Ni ibamu pẹlu awọn aṣawakiri pataki HTML+CSS+JS koodu orisun
<!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>Eyi ti o wa loke ni CSS adaptive ebute alagbeka, eyiti o ṣafihan oriṣiriṣi akoonu alaye idahun iboju @media ni ibamu si awọn iboju oriṣiriṣi.
Ireti Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Pipin "Aṣamubadọgba Alagbeka CSS Awọn Iboju oriṣiriṣi Ifihan Iyatọ @media Idahun iboju", eyiti o ṣe iranlọwọ fun ọ.
Kaabo lati pin ọna asopọ ti nkan yii:https://www.chenweiliang.com/cwl-2074.html
Kaabọ si ikanni Telegram ti bulọọgi Chen Weiliang lati gba awọn imudojuiwọn tuntun!
📚 Itọsọna yii ni iye nla, 🌟Eyi jẹ aye to ṣọwọn, maṣe padanu rẹ! ⏰⌛💨
Pin ati fẹran ti o ba fẹ!
Pinpin rẹ ati awọn ayanfẹ jẹ iwuri wa lemọlemọfún!