Artikulo Direktoryo
Giunsa pagpakita sa mobile responsive CSS ang lainlain nga mga layout sa pagtubag sa screen sa @media sumala sa lainlaing mga resolusyon?
Ang mosunod nga artikulo magpaila kon unsaon paggamit ang CSS sa pagtino sa lain-laing mga resolusyon ug pagpakita sa lain-laing gilapdon nga mga layout aron makab-ot ang adaptive width.
Ang mga higala nga nanginahanglan mahimong mag-refer niini, hinaut nga kini makatabang sa tanan.
Ang kalainan tali sa @media ug @media screen printing web page
- Kung ang css kinahanglan gamiton sa usa ka kagamitan sa pag-imprenta, gamita ang @media, kung dili, gamita ang @media screen.
- Bisan pa, dili kini kinahanglan nga tinuod. Sa tinuud, kung imong ilisan ang "screen" sa "print" ug isulat kini nga @media print, nan ang CSS mahimong magamit sa aparato sa pag-imprinta;
- Apan timan-i nga ang css nga gipahayag sa @media print balido lamang sa mga kagamitan sa pag-imprenta.
1. DIVCSS gamay nga paghulagway sa kaso
Una namon nga gibutang ang usa ka DIV box CSS nga ginganlag ".abc", gibutang ang gitas-on niini sa 300px, ug gibutang ang utlanan sa CSS sa itom;
- ug mga setting
margin:0 autoAng layout nasentro, ug kining duha ka mga estilo gi-pre-set alang sa sayon nga pagtan-aw.
Kami mano-mano nga gi-drag ang browser aron ipakita ang gilapdon, ug dayon tan-awa kung giunsa pagbag-o ang gilapdon sa kahon:
- Kung ang gilapdon sa browser gi-adjust sa gilapdon nga dili molapas sa 500px, ang 100px gipakita nga katumbas sa gilapdon sa kahon;
- Kung ang gilapdon sa browser gi-adjust nga dili mubu sa 901px, ang ".abc" gipakita nga katumbas sa gilapdon sa kahon, nga nagpakita sa 200px;
- Kung ang gilapdon sa browser gi-adjust aron mahimong mas dako sa 1201px, ang gilapdon sa butang nga kahon magpakita sa 1200px;
- Kung kini ubos sa 1200px, ang gilapdon sa display kay 900px.
2, CSS mobile phone mobile terminal adaptive 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宽度 */- Kinahanglang hinumdoman nga ang han-ay sa CSS code mao ang pag-type sa CSS gikan sa dako ngadto sa gamay (paghukom nga mas dako ang gilapdon sa browser, mas taas ang atubangan).
- Kini tungod sa lohikal nga relasyon, ang paghukom sa @media sa pag-debug sa CSS magpahinabo nga mapakyas ang paghukom.
3. HTML 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}
}
/* 设置了浏览器宽度不小于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>Mubo nga sulat: device-aspect-ratio
- device-aspect-ratio mahimong gamiton aron mohaum sa mga device nga adunay espesipikong screen aspect ratio, nga usa usab ka mapuslanong kabtangan.
- Pananglitan, gusto sa among panid nga maghubit ug istilo para sa normal nga mga screen nga adunay aspect ratio nga 4:3.
- Dayon para sa 16:9 ug 16:10 widescreen, ipasabot ang laing estilo, sama sa adaptive width ug fixed width:
- @media lang screen ug (device-aspect-ratio:4/3)
4. Nahiuyon sa dagkong mga browser HTML+CSS+JS source 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>Ang naa sa taas mao ang mobile terminal adaptive CSS, nga nagpakita sa lain-laing @media screen responsive detalyado nga sulod sumala sa lain-laing mga screen.
Paglaum Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Gipaambit nga "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", nga makatabang kanimo.
Welcome sa pagpaambit sa link niini nga artikulo:https://www.chenweiliang.com/cwl-2074.html
Malipayon nga pag-abut sa channel sa Telegram sa blog ni Chen Weiliang aron makuha ang labing bag-ong mga update!
📚 Kini nga giya adunay daghang kantidad, 🌟Kini usa ka talagsaon nga oportunidad, ayaw palabya kini! ⏰⌛💨
Share ug like kung ganahan ka!
Ang imong pagpaambit ug pag-like mao ang among padayon nga kadasig!