Saraka ya Nakala
Je, CSS inayojibu ya simu huonyeshaje mipangilio tofauti ya skrini ya @media kulingana na maazimio tofauti?
Makala ifuatayo yatatambulisha jinsi ya kutumia CSS kubainisha maazimio tofauti na kuonyesha mipangilio ya upana tofauti ili kufikia upana wa kubadilika.
Marafiki wanaohitaji wanaweza kurejelea, natumai itakuwa na msaada kwa kila mtu.
Tofauti kati ya @media na kurasa za wavuti za uchapishaji za skrini ya @media
- Ikiwa css inahitaji kutumika katika kifaa cha uchapishaji, tumia @media, vinginevyo, tumia skrini ya @media.
- Hata hivyo, hii si lazima iwe kweli. Kwa hakika, ukibadilisha "skrini" na "print" na kuiandika kama @media print, basi CSS inaweza kutumika kwenye kifaa cha uchapishaji;
- Lakini kumbuka kuwa css iliyotangazwa na @media print ni halali kwenye vifaa vya uchapishaji pekee.
1. Maelezo ya kesi ndogo ya DIVCSS
Kwanza tuliweka kisanduku cha DIV CSS kinachoitwa ".abc", tukaweka urefu wake hadi 300px, na kuweka mpaka wa CSS kuwa nyeusi;
- na mipangilio
margin:0 autoMpangilio umewekwa katikati, na mitindo hii miwili imewekwa mapema ili kutazamwa kwa urahisi.
Tunaburuta kivinjari mwenyewe ili kuonyesha upana, na kisha angalia jinsi upana wa kisanduku unavyobadilika:
- Wakati upana wa kivinjari unarekebishwa kwa upana wa si zaidi ya 500px, 100px inaonyeshwa sambamba na upana wa sanduku;
- Wakati upana wa kivinjari unarekebishwa kuwa chini ya 901px, ".abc" inaonyeshwa sambamba na upana wa kisanduku, ambacho kinaonyesha 200px;
- Wakati upana wa kivinjari unarekebishwa kuwa mkubwa kuliko 1201px, upana wa kipengee cha kisanduku huonyesha 1200px;
- Ikiwa ni chini ya 1200px, upana wa onyesho ni 900px.
2, nambari ya adaptive ya terminal ya simu ya rununu ya CSS
.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宽度 */- Ikumbukwe kwamba mpangilio wa msimbo wa CSS ni kupanga CSS kutoka kubwa hadi ndogo (kwa kuzingatia kwamba upana wa kivinjari, mbele ya juu).
- Hii ni kwa sababu ya uhusiano wa kimantiki, hukumu ya @media ya utatuzi wa CSS itasababisha hukumu kushindwa.
3. msimbo wa 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>Kumbuka: uwiano wa kipengele cha kifaa
- uwiano wa kipengele cha kifaa unaweza kutumika kutoshea vifaa vilivyo na uwiano mahususi wa vipengele vya skrini, ambayo pia ni sifa muhimu.
- Kwa mfano, ukurasa wetu unataka kufafanua mtindo kwa skrini za kawaida zenye uwiano wa 4:3.
- Kisha kwa skrini pana 16:9 na 16:10, fafanua mtindo mwingine, kama vile upana unaojirekebisha na upana usiobadilika:
- skrini ya @media pekee na (uwiano wa kifaa:4/3)
4. Inatumika na vivinjari vikuu msimbo wa chanzo wa HTML+CSS+JS
<!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>Iliyo hapo juu ni CSS inayobadilika ya simu ya mkononi, ambayo huonyesha maudhui ya kina tofauti ya @media kulingana na skrini tofauti.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) ilishirikiwa "Skrini Zinazobadilika za Simu ya Mkononi ya CSS Huonyesha Kiitikio cha Skrini ya @media", ambayo ni muhimu kwako.
Karibu kushiriki kiungo cha makala hii:https://www.chenweiliang.com/cwl-2074.html
Karibu kwenye chaneli ya Telegramu ya blogu ya Chen Weiliang ili kupata masasisho mapya zaidi!
📚 Mwongozo huu una thamani kubwa, 🌟Hii ni fursa adimu, usiikose! ⏰⌛💨
Share na like ukipenda!
Kushiriki kwako na kupenda kwako ndio motisha yetu inayoendelea!