Papa Kuhikuhi ʻatikala
Pehea e hōʻike ai ka CSS responsive mobile i nā ʻokoʻa like ʻole @media e like me nā hoʻoholo like ʻole?
E hōʻike ana ka ʻatikala aʻe pehea e hoʻohana ai i ka CSS no ka hoʻoholo ʻana i nā hoʻoholo like ʻole a hōʻike i nā hoʻolālā ākea like ʻole e hoʻokō i ka laulā adaptive.
Hiki i nā hoa pilikia ke kuhikuhi iā ia, manaʻolana wau e kōkua ia i nā mea a pau.
ʻOkoʻa ma waena o @media a me @media nā ʻaoʻao pūnaewele paʻi pale
- Inā pono e hoʻohana ʻia ka css i kahi mea paʻi, e hoʻohana i @media, a i ʻole, e hoʻohana i ka @media pale.
- Eia naʻe, ʻaʻole ʻoiaʻiʻo kēia, ʻoiaʻiʻo, inā ʻoe e hoʻololi i ka "screen" me ka "print" a kākau iā ia ma ke ʻano he @media print, a laila hiki ke hoʻohana ʻia ka CSS ma ka mea paʻi;
- Akā, e hoʻomanaʻo ʻia ʻo ka css i haʻi ʻia e @media print aia wale nō ma nā mea paʻi.
1. DIVCSS wehewehe hihia liʻiliʻi
Hoʻonohonoho mua mākou i kahi pahu DIV CSS i kapa ʻia ʻo ".abc", hoʻonoho i kona kiʻekiʻe i 300px, a hoʻonohonoho i ka palena CSS i ʻeleʻele;
- a me nā hoʻonohonoho
margin:0 autoAia ke kikowaena, a ua hoʻonohonoho mua ʻia kēia mau ʻano ʻelua no ka nānā maʻalahi.
Huki lima mākou i ka polokalamu kele pūnaewele e hōʻike i ka laulā, a laila e nānā i ka loli o ka laulā o ka pahu:
- Ke hoʻololi ʻia ka laula o ka polokalamu kele i ka laula ʻaʻole i ʻoi aku ma mua o 500px, hōʻike ʻia ka 100px e like me ka laulā o ka pahu;
- Ke hoʻololi ʻia ka laulā o ka polokalamu kele pūnaewele i emi iho ma mua o 901px, ".abc" e hōʻike ʻia e like me ka laulā o ka pahu, e hōʻike ana i ka 200px;
- Ke hoʻololi ʻia ka laula pūnaewele i ʻoi aku ka nui ma mua o 1201px, hōʻike ka laulā o ka pahu pahu i ka 1200px;
- Ke emi ma lalo o 1200px, ʻo 900px ka laulā hōʻike.
2, CSS ke kelepona paʻa paʻa paʻa hoʻololi code
.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宽度 */- Pono e hoʻomaopopo ʻia ʻo ke kauoha CSS code e hoʻonohonoho ana i ka CSS mai ka nui a i ka liʻiliʻi (e manaʻo ana ʻo ka nui o ka laula pūnaewele, ʻoi aku ka kiʻekiʻe o ka mua).
- ʻO kēia ma muli o ka pilina pili pono, ʻo ka hoʻoholo ʻana o @media no ka hoʻopiʻi ʻana i ka CSS e hāʻule ka hoʻoholo.
3. code 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>'Ōlelo Aʻo: mea-ʻano-ratio
- Hiki ke hoʻohana ʻia ka ratio-aspect-ratio no ka hoʻopili ʻana i nā hāmeʻa me nā lākiō hiʻohiʻona kikoʻī, ʻo ia hoʻi kahi waiwai pono.
- No ka laʻana, makemake kā mākou ʻaoʻao e wehewehe i kahi ʻano no nā pale maʻamau me kahi lākiō o 4:3.
- A laila no 16:9 a me 16:10 pale ākea, e wehewehe i kahi ʻano ʻē aʻe, e like me ka laulā adaptive a me ka laulā paʻa:
- @media wale nō ka pale a (mea-ʻano-ratio:4/3)
4. He kūpono me nā polokalamu kele pūnaewele HTML+CSS+JS kumu kumu
<!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>ʻO ka mea i luna, ʻo ka mobile terminal adaptive CSS, e hōʻike ana i nā ʻike kikoʻī like ʻole @media e like me nā pale like ʻole.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Kaʻana like "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", he mea kōkua iā ʻoe.
Welina mai e kaʻana like i ka loulou o kēia ʻatikala:https://www.chenweiliang.com/cwl-2074.html
Welina mai i ke kahawai Telegram o ka moʻomanaʻo ʻo Chen Weiliang e kiʻi i nā mea hou loa!
📚 He waiwai nui kēia alakaʻi, 🌟He manawa kakaikahi kēia, mai poina! ⏰⌛💨
Kaʻana like a like inā makemake ʻoe!
ʻO kāu kaʻana like a me kou makemake ʻo kā mākou hoʻoikaika mau!