Kalozera wa Nkhani
Kodi CSS yoyankha pafoni imawonetsa bwanji masanjidwe osiyanasiyana a @media skrini molingana ndi malingaliro osiyanasiyana?
Nkhani yotsatirayi ifotokoza momwe mungagwiritsire ntchito CSS kudziwa zosintha zosiyanasiyana ndikuwonetsa masanjidwe osiyanasiyana m'lifupi kuti mukwaniritse m'lifupi mwake.
Anzanu osowa atha kuloza, ndikhulupilira kuti zikhala zothandiza kwa aliyense.
Kusiyana pakati pa masamba a @media ndi @media skrini yosindikiza masamba
- Ngati css ikufunika kugwiritsidwa ntchito pachipangizo chosindikizira, gwiritsani ntchito @media, apo ayi, gwiritsani ntchito chithunzi cha @media.
- Komabe, izi sizowona kwenikweni. M'malo mwake, ngati mutasintha "screen" ndi "print" ndikulemba ngati @media print, ndiye kuti CSS ingagwiritsidwe ntchito pa chipangizo chosindikizira;
- Koma dziwani kuti css yolengezedwa ndi @media print ndiyovomerezeka pazida zosindikizira.
1. Mafotokozedwe ang'onoang'ono a DIVCSS
Poyamba tidayika bokosi la DIV CSS lotchedwa ".abc", kuyika kutalika kwake ku 300px, ndikuyika malire a CSS kukhala akuda;
- ndi zoikamo
margin:0 autoMasanjidwewo ndi okhazikika, ndipo masitayelo awiriwa adakonzedweratu kuti awonedwe mosavuta.
Timakokera pamanja msakatuli kuti tiwonetse m'lifupi mwake, ndikuwona momwe kukula kwa bokosilo kumasinthira:
- M'lifupi mwa msakatuliwo ukasinthidwa kukhala m'lifupi mwake osapitilira 500px, 100px imawonetsedwa molingana ndi kukula kwa bokosilo;
- Pamene m'lifupi mwa msakatuli wasinthidwa kukhala osachepera 901px, ".abc" ikuwonetsedwa mofanana ndi m'lifupi mwa bokosi, lomwe limasonyeza 200px;
- Msakatuli akasinthidwa kukhala wamkulu kuposa 1201px, m'lifupi mwake chinthucho chimawonetsa 1200px;
- Ikakhala yochepera 1200px, m'lifupi mwake ndi 900px.
2, CSS foni yam'manja yosinthira nambala yosinthira
.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宽度 */- Zindikirani kuti dongosolo la code la CSS ndikulemba CSS kuchokera ku zazikulu mpaka zazing'ono (poganiza kuti kukula kwa msakatuli, ndipamwamba kutsogolo).
- Izi ndichifukwa cha ubale womveka, @media kuweruza kwa CSS debugging kupangitsa kuti chiweruzocho chilephereke.
3. HTML kodi
<!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>Chidziwitso: chipangizo-chiwerengero-chiwerengero
- Chigawo cha chipangizo chingagwiritsidwe ntchito kuti chigwirizane ndi zipangizo zomwe zili ndi mawonekedwe enieni a zenera, zomwe zilinso zothandiza.
- Mwachitsanzo, tsamba lathu likufuna kutanthauzira masitayilo azithunzi wamba okhala ndi chiyerekezo cha 4:3.
- Kenako pa 16:9 ndi 16:10 sikirini yayikulu, fotokozerani masitayelo ena, monga m'lifupi mwake ndi m'lifupi mwake:
- @media yekha chophimba ndi (chida-gawo-gawo:4/3)
4. Yogwirizana ndi asakatuli akuluakulu HTML+CSS+JS code code
<!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>Zomwe zili pamwambazi ndi CSS yosinthira mafoni, yomwe imawonetsa zosiyana za @media zomvera mwatsatanetsatane malinga ndi zowonetsera zosiyanasiyana.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Kugawidwa kwa "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", zomwe ndi zothandiza kwa inu.
Takulandirani kugawana ulalo wa nkhaniyi:https://www.chenweiliang.com/cwl-2074.html
Takulandilani panjira ya Telegraph yabulogu ya Chen Weiliang kuti mupeze zosintha zaposachedwa!
📚 Bukuli lili ndi phindu lalikulu, 🌟Uwu ndi mwayi wosowa, musaphonye! ⏰⌛💨
Share ndi like ngati mukufuna!
Kugawana kwanu ndi zomwe mumakonda ndizomwe zimatilimbikitsa nthawi zonse!