Chinyorwa Directory
Ko nhare inopindura CSS inoratidza sei akasiyana @media skrini inopindura marongero zvinoenderana neakasiyana magadzirirwo?
Chinyorwa chinotevera chichasuma mashandisirwo eCSS kuona magadzirirwo akasiyana uye kuratidza hupamhi hwakasiyana marongero kuti uwane adaptive upamhi.
Shamwari dzinoshaya dzinogona kuzvinongedzera, ndinovimba zvichabatsira kumunhu wese.
Musiyano uripo pakati pe @media uye @media skrini inodhinda mapeji ewebhu
- Kana iyo css ichida kushandiswa mumudziyo wekudhinda, shandisa @media, kana zvisina kudaro, shandisa @media skrini.
- Zvisinei, ichi hachisi chokwadi chaicho, kana ukatsiva "screen" ne "print" uye wonyora se @media print, ipapo CSS inogona kushandiswa pakadhinda;
- Asi chenjera, iyo css yakaziviswa ne @media print inongoshanda pamidziyo yekudhinda.
1. DIVCSS diki nyaya tsananguro
Takatanga kuseta DIV box CSS inonzi ".abc", isa kureba kwayo kusvika 300px, uye isa muganhu weCSS kuita dema;
- uye marongero
margin:0 autoIyo dhizaini yakatarisana, uye aya maviri masitayera akafanogadzika kuti aone nyore.
Isu pachedu tinodhonza browser kuratidza hupamhi, tozoona kuti hupamhi hwebhokisi hunochinja sei:
- Kana hupamhi hwebrowser huchigadziriswa kuhupamhi husingapfuuri 500px, 100px inoratidzwa inoenderana nehupamhi hwebhokisi;
- Kana hupamhi hwebrowser huchigadziriswa kuti huve pasi pe901px, ".abc" inoratidzwa inoenderana nehupamhi hwebhokisi, iyo inoratidza 200px;
- Kana hupamhi hwebrowser hwagadziriswa kuti hukuru kupfuura 1201px, hupamhi hwechinhu chebhokisi chinoratidzwa se 1200px;
- Kana iri pasi pe1200px, hupamhi hwekuratidzira ndeye 900px.
2, CSS nhare mbozha terminal inogadzirisa kodhi
.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宽度 */- Izvo zvinofanirwa kucherechedzwa kuti iyo CSS kodhi yekodhi iri kutaipa CSS kubva kuhombe kusvika kudiki (tichifunga kuti yakakura hupamhi hwebrowser, iyo yakakwira kumberi).
- Izvi zvinodaro nekuda kwehukama hune musoro, @media kutonga kweCSS debugging kuchaita kuti mutongo utadze.
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>Cherechedza: mudziyo-chikamu-chiyero
- Device-aspect-ratio inogona kushandiswa kuenderana nemidziyo ine chaiyo screen aspect ratios, iri zvakare chinhu chinobatsira.
- Semuyenzaniso, peji redu rinoda kutsanangura chimiro chezvakajairwa zvikirini zvine chiyero che4:3.
- Kozoti 16:9 uye 16:10 sikirini yakakura, tsanangura imwe sitaira, senge adaptive upamhi uye upamhi hwakamisikidzwa:
- @media chete skrini uye (mudziyo-chikamu-chiyero:4/3)
4. Inopindirana nemabhurawuza makuru 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>Izvo zviri pamusoro ndiyo nharembozha inogadzirisa CSS, iyo inoratidza akasiyana @media skrini inopindura zvakadzama zvemukati zvinoenderana neakasiyana skrini.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Yakagovaniswa "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", iyo inobatsira kwauri.
Welcome to share link yechinyorwa chino:https://www.chenweiliang.com/cwl-2074.html
Tikugashirei kuTeregiramu chiteshi cheChen Weiliang's blog kuti uwane zvichangobva kuitika!
📚 Iri gwara rine kukosha kukuru, 🌟Uyu mukana usingawanzo, usapotsa! ⏰⌛💨
Govera uye like kana uchida!
Kugovera kwako uye kuda ndiko kukurudzira kwedu kunoramba kuripo!