Poŝtelefonaj adaptaj CSS malsamaj ekranoj montras malsamajn @media ekranojn respondema

Kiel movebla respondema CSS montras malsamajn @media ekranajn respondemajn aranĝojn laŭ malsamaj rezolucioj?

La sekva artikolo enkondukos kiel uzi CSS por determini malsamajn rezoluciojn kaj montri malsamajn larĝajn aranĝojn por atingi adaptan larĝon.

Bezonantaj amikoj povas aludi ĝin, mi esperas, ke ĝi estos helpema al ĉiuj. 

La diferenco inter @media kaj @media ekranprintaj retpaĝoj

• Se la css bezonas esti uzata en presa aparato, uzu @media, alie, uzu @media ekrano.
• Tamen tio ne estas nepre vera.Fakte, se vi anstataŭigas "ekrano" per "print" kaj skribas ĝin kiel @media print, tiam la CSS povas esti uzata sur la presa aparato;
• Sed rimarku, ke la css deklarita de @media print validas nur ĉe presaj aparatoj.

1. DIVCSS malgranda kazo priskribo

Ni unue starigis DIV-skatolon CSS nomitan ".abc", starigis ĝian altecon al 300px, kaj starigis la CSS-randon nigran;

• kaj agordojnmargin:0 autoLa aranĝo estas centrita, kaj ĉi tiuj du stiloj estas antaŭfiksitaj por facila spektado.

Ni mane trenas la retumilon por montri la larĝon, kaj poste observas kiel ŝanĝiĝas la larĝo de la skatolo:

1. Kiam la larĝo de la retumilo estas ĝustigita al larĝo de ne pli ol 500px, 100px montriĝas responda al la larĝo de la skatolo;
2. Kiam la larĝo de la retumilo estas ĝustigita por esti malpli ol 901px, ".abc" montriĝas responda al la larĝo de la skatolo, kiu montras 200px;
3. Kiam la retumila larĝo estas ĝustigita por esti pli granda ol 1201px, la larĝo de la kestobjekto montras 1200px;
4. Kiam ĝi estas malpli ol 1200px, la ekrana larĝo estas 900px.

2, CSS poŝtelefona poŝtelefona fina stacio adapta kodo

.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宽度 */

• Oni devas rimarki, ke la ordo de CSS-kodo kompostas CSS de granda al malgranda (juĝante, ke ju pli granda la retumila larĝo, des pli alta la fronto).
• Ĉi tio estas pro la logika rilato, la juĝo de @media pri CSS-elpurigo kaŭzos la juĝon malsukcesi.

3. HTML-kodo

<!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>

Noto: aparato-aspekta proporcio

• aparato-bildformato povas esti uzata por konveni aparatojn kun specifaj ekranaj bildformatoj, kio ankaŭ estas utila posedaĵo.
• Ekzemple, nia paĝo volas difini stilon por normalaj ekranoj kun proporcio de 4:3.
• Tiam por 16:9 kaj 16:10 larĝekrano, difinu alian stilon, kiel adaptan larĝon kaj fiksan larĝon:
• @media nur ekrano kaj (aparato-proporcio:4/3)

4. Kongrua kun ĉefaj retumiloj HTML+CSS+JS fontkodo

<!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>

Ĉi-supra estas la movebla terminalo adapta CSS, kiu montras malsaman @media ekrano respondema detalan enhavon laŭ malsamaj ekranoj.