Direttorju tal-Artikoli
Kif is-CSS adattivi mobbli juri layouts differenti li jirrispondu għall-iskrin @media skont riżoluzzjonijiet differenti?
L-artikolu li ġej se jintroduċi kif tuża CSS biex tiddetermina riżoluzzjonijiet differenti u turi layouts ta 'wisa' differenti biex tinkiseb wisa 'adattiva.
Ħbieb fil-bżonn jistgħu jirreferu għaliha Nittama li tkun ta’ għajnuna għal kulħadd.
Id-differenza bejn @media u @media screen printing paġni tal-web
- Jekk is-css jeħtieġ li jintuża f'apparat tal-istampar, imbagħad uża @media, inkella, uża @media screen.
- Madankollu, dan mhux neċessarjament veru.Fil-fatt, jekk tissostitwixxi "screen" ma "print" u tikteb bħala @media print, allura s-CSS jista 'jintuża fuq l-apparat tal-istampar;
- Imma jekk jogħġbok innota li s-css iddikjarat minn @media print huwa validu biss fuq l-apparat tal-istampar.
1. DIVCSS deskrizzjoni tal-każ żgħir
L-ewwel nissettjaw l-isem CSS ta 'kaxxa DIV għal ".abc", issettja l-għoli tiegħu għal 300px, u l-bord CSS tiegħu għal iswed;
- u settings
margin:0 autoIt-tqassim huwa ċċentrat, u dawn iż-żewġ stili huma ssettjati minn qabel għal wiri aktar faċli.
Aħna nkaxkru manwalment il-browser biex turi l-wisa ', u mbagħad nosservaw il-bidla fil-wisa' tal-kaxxa:
- Meta l-wisa 'tal-browser tiġi aġġustata għal wisa' mhux akbar minn 500px, il-wisa 'tal-kaxxa korrispondenti se turi 100px;
- Meta l-wisa 'tal-browser tiġi aġġustata biex ma tkunx akbar minn 901px, ".abc" se jintwera u l-wisa' tal-kaxxa korrispondenti se jintwera bħala 200px;
- Meta l-wisa 'tal-browser tiġi aġġustata biex tkun akbar minn 1201px, il-wisa' tal-oġġett tal-kaxxa turi 1200px;
- Meta inqas minn 1200px, il-wisa 'tal-wiri hija 900px.
2. Kodiċi adattivi tat-terminal mobbli 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宽度 */- Dak li jeħtieġ li tingħata attenzjoni huwa l-ordni tal-kodiċi CSS, u s-CSS huwa fformattjat minn kbir għal żgħir (aktar ma tkun kbira l-wisa 'tal-browser, iktar ikun għoli).
- Dan huwa minħabba r-relazzjoni loġika. Il-ġudizzju ta' @media dwar id-debugging tas-CSS se jirriżulta f'ġudizzju invalidu.
3. Kodiċi 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>Nota: apparat-proporzjon-aspett
- device-aspect-ratio jista 'jintuża biex jadatta għal apparati bi proporzjonijiet speċifiċi ta' l-aspett ta 'l-iskrin, li huwa wkoll attribut utli ħafna.
- Pereżempju, il-paġna tagħna trid tiddefinixxi stil għal skrins ordinarji b'proporzjon ta 'aspett ta' 4:3.
- Imbagħad għal skrin wiesa' 16:9 u 16:10, iddefinixxi stil ieħor, bħal wisa' adattivi u wisa' fiss:
- @media biss skrin u (device-aspect-ratio:4/3)
4. Kompatibbli mal-kodiċi tas-sors HTML + CSS + JS ta 'browsers ewlenin
<!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>Dan ta 'hawn fuq huwa s-CSS adattiv mobbli, li juri dettalji differenti li jirrispondu għall-iskrin @media skond skrins differenti.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) qasmet "Mobile Adaptive CSS Displays Different Displays on Different Screens @media Screen Responsiveness", li hija ta 'għajnuna għalik.
Merħba biex taqsam il-link ta' dan l-artikolu:https://www.chenweiliang.com/cwl-2074.html
Merħba fil-kanal Telegram tal-blog ta' Chen Weiliang biex tikseb l-aħħar aġġornamenti!
📚 Din il-gwida fiha valur kbir, 🌟Din hija opportunità rari, titlifhiex! ⏰⌛💨
Share u like jekk togħġobkom!
Il-qsim u l-likes tiegħek huma l-motivazzjoni kontinwa tagħna!