Drejtoria e artikujve
Si shfaq CSS-ja e përgjegjshme për celularin paraqitje të ndryshme reaguese të ekranit @media sipas rezolucioneve të ndryshme?
Artikulli vijues do të prezantojë se si të përdorni CSS për të përcaktuar rezolucione të ndryshme dhe për të shfaqur paraqitje të ndryshme të gjerësisë për të arritur gjerësinë adaptive.
Miqtë në nevojë mund t'i referohen, shpresoj se do të jetë e dobishme për të gjithë.
Dallimi midis faqeve të internetit të printimit të ekranit @media dhe @media
- Nëse css duhet të përdoret në një pajisje printimi, përdorni @media, përndryshe, përdorni ekranin @media.
- Megjithatë, kjo nuk është domosdoshmërisht e vërtetë.Në fakt, nëse zëvendësoni "ekranin" me "print" dhe e shkruani si @media print, atëherë CSS mund të përdoret në pajisjen e printimit;
- Por vini re se css-ja e deklaruar nga @media print është e vlefshme vetëm në pajisjet printuese.
1. Përshkrimi i rastit të vogël DIVCSS
Fillimisht vendosëm një kuti DIV CSS të quajtur ".abc", vendosëm lartësinë e saj në 300px dhe vendosëm kufirin CSS në të zezë;
- dhe cilësimet
margin:0 autoParaqitja është në qendër dhe këto dy stile janë të paracaktuara për shikim të lehtë.
Ne e tërheqim manualisht shfletuesin për të shfaqur gjerësinë dhe më pas vëzhgojmë se si ndryshon gjerësia e kutisë:
- Kur gjerësia e shfletuesit rregullohet në një gjerësi prej jo më shumë se 500 px, shfaqet 100 px që korrespondon me gjerësinë e kutisë;
- Kur gjerësia e shfletuesit rregullohet të jetë më e vogël se 901 px, shfaqet ".abc" që korrespondon me gjerësinë e kutisë, e cila shfaq 200 px;
- Kur gjerësia e shfletuesit është rregulluar të jetë më e madhe se 1201px, gjerësia e objektit të kutisë shfaqet 1200px;
- Kur është më pak se 1200 px, gjerësia e ekranit është 900 px.
2, kodi adaptiv i terminalit celular CSS të telefonit celular
.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宽度 */- Duhet të theksohet se rendi i kodit CSS është duke shtypur CSS nga i madh në të vogël (duke gjykuar se sa më e madhe gjerësia e shfletuesit, aq më e lartë është pjesa e përparme).
- Kjo është për shkak të marrëdhënies logjike, gjykimi i @media për korrigjimin e CSS do të bëjë që gjykimi të dështojë.
3. Kodi 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>Shënim: raporti pajisje-aspekt
- raporti pajisje-aspekt mund të përdoret për të përshtatur pajisjet me raporte të veçanta të pamjes së ekranit, gjë që është gjithashtu një veti e dobishme.
- Për shembull, faqja jonë dëshiron të përcaktojë një stil për ekranet normale me një raport pamjeje 4:3.
- Më pas për ekranin e gjerë 16:9 dhe 16:10, përcaktoni një stil tjetër, si gjerësia adaptive dhe gjerësia fikse:
- Ekrani vetëm @media dhe (raporti i aspektit të pajisjes: 4/3)
4. E përputhshme me kodin burimor HTML+CSS+JS shfletuesit kryesorë
<!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>E mësipërme është CSS adaptive e terminalit celular, e cila shfaq përmbajtje të ndryshme të detajuara reaguese të ekranit @media sipas ekraneve të ndryshme.
Blogu Hope Chen Weiliang ( https://www.chenweiliang.com/ ) E përbashkët "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", e cila është e dobishme për ju.
Mirë se vini të shpërndani lidhjen e këtij artikulli:https://www.chenweiliang.com/cwl-2074.html
Mirësevini në kanalin Telegram të blogut të Chen Weiliang për të marrë përditësimet më të fundit!
📚 Ky udhëzues përmban vlera të mëdha, 🌟Ky është një mundësi e rrallë, mos e humbisni! ⏰⌛💨
Shpërndaje dhe like nëse të pëlqen!
Ndarjet dhe pëlqimet tuaja janë motivimi ynë i vazhdueshëm!