Artikulu direktorioa
Nola bistaratzen ditu CSS mugikorrentzako erantzunak @media pantailaren diseinu desberdinak bereizmen ezberdinen arabera?
Hurrengo artikuluan CSS nola erabili bereizmen desberdinak zehazteko eta zabalera-diseinu desberdinak bistaratzeko, zabalera egokitzailea lortzeko.
Behar duten lagunek aipa dezakete, guztiontzat lagungarria izatea espero dut.
@media eta @media serigrafiako web orrien arteko aldea
- Css inprimatzeko gailu batean erabili behar bada, erabili @media, bestela, erabili @media pantaila.
- Hala ere, hori ez da zertan egia.Izan ere, "pantaila" "inprimatu"-rekin ordezkatzen baduzu eta @media print gisa idazten baduzu, orduan CSS erabil daiteke inprimatzeko gailuan;
- Baina kontuan izan @media print-ek deklaratutako css-ak inprimatzeko gailuetan soilik balio duela.
1. DIVCSS kasu txikiaren deskribapena
Lehenik eta behin ".abc" izeneko DIV kutxa CSS bat ezarri dugu, bere altuera 300 px-en ezarri dugu eta CSS ertza beltz ezarri dugu;
- eta ezarpenak
margin:0 autoDiseinua zentratuta dago, eta bi estilo hauek aurrez ezarrita daude erraz ikusteko.
Eskuz arrastatuko dugu arakatzailea zabalera bistaratzeko, eta, ondoren, koadroaren zabalera nola aldatzen den ikusten dugu:
- Arakatzailearen zabalera 500 px baino gehiagoko zabalerara doitzen denean, 100 px bistaratzen dira koadroaren zabalerari dagozkionak;
- Arakatzailearen zabalera 901px baino txikiagoa izan dadin doitzen denean, ".abc" bistaratzen da koadroaren zabalerari dagokiona, 200px bistaratzen duena;
- Arakatzailearen zabalera 1201px baino handiagoa izan dadin doitzen denean, koadroaren objektuaren zabalera 1200px bistaratzen da;
- 1200 px baino txikiagoa denean, pantailaren zabalera 900 px-koa da.
2, CSS telefono mugikorreko terminal mugikorren kode egokitzailea
.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宽度 */- Kontuan izan behar da CSS kodearen ordena CSS handitik txikira konposatzen ari dela (arakatzailearen zabalera zenbat eta handiagoa izan, orduan eta aurrealdea altuagoa dela ikusiz).
- Erlazio logikoa dela eta, @media-k CSS arazketari buruz egindako epaiketak epaia huts egitea eragingo du.
3. HTML kodea
<!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>Oharra: gailu-aspektu-erlazioa
- device-aspect-ratio pantailaren aspektu-erlazio espezifikoak dituzten gailuak egokitzeko erabil daiteke, propietate erabilgarria ere bada.
- Adibidez, gure orrialdeak 4:3-ko aspektu-erlazioa duten pantaila arruntetarako estilo bat definitu nahi du.
- Ondoren, 16:9 eta 16:10 pantaila zabalerako, definitu beste estilo bat, hala nola zabalera egokitzailea eta zabalera finkoa:
- @media soilik pantaila eta (gailuaren itxura-erlazioa: 4/3)
4. Nabigatzaile nagusiekin bateragarria HTML+CSS+JS iturburu-kodea
<!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>Goiko terminal mugikorren CSS moldagarria da, eta pantaila ezberdinen arabera @media pantailaren eduki zehatza erantzuten duena bistaratzen du.
Hope Chen Weiliang bloga ( https://www.chenweiliang.com/ ) Partekatua "Mugikorren CSS egokitutako pantaila desberdinak bistaratzen dira @media pantailaren erreaktibotasun desberdinak", eta hori lagungarria zaizu.
Ongi etorri artikulu honen esteka partekatzera:https://www.chenweiliang.com/cwl-2074.html
Ongi etorri Chen Weiliang-en blogeko Telegram kanalera azken eguneraketak jasotzeko!
📚 Gida honek balio handia du, 🌟Aukera arraroa da hau, ez galdu! ⏰⌛💨
Partekatu eta gustatzen bazaizu!
Zure partekatzea eta gustukoak dira gure etengabeko motibazioa!