Wéi schreift Dir CSS Media Queries?

De Syntax fir béid min-Breed a maximal Breet Media Queryën

Responsable Webdesign ass eng Virgäng virzebereeden Websäiten, wou dës Säiten hiren Layout an Optriede dynamesch änneren kënnen op Basis vun engem Viséierungsgréisst vum Besucher . Grouss Szenen kënnen e Layout kréien fir déi méi grouss Affichëë wéi e klengt Apparater, wéi Handyen, kënnen déi selwecht Websäit an enger Aart benotze fir dat klengt Bild ze maachen. Dëse Wee ass e bessere Benotzer erliewen fir all Benotzer ze benotzen an et kann och hëllefen, de Sichmatch Ranking ze verbesseren . E wichtege Bestanddeel vun der respektiven Webdesign ass CSS Media Queries.

Medien Queries sinn wéi kleng bedinglech Aussoen an der CSS Datei vun der Websäit, fir datt Dir verschidde CSS-Regelen festgeluecht hutt, déi nëmmen beaflosse solle ginn wann eng gewëssen Zoustand fonnt gëtt - wéi wann e Bildschirmgréisst iwwer oder ënner bestëmmte Schwellen ass.

Medien Queries an Action

Also, wéi benotzt Dir Medien Queries op enger Websäit? Hei ass e ganz einfache Beispill:

1. Dir sollt mat engem gutt strukturéiert HTML-Dokument gratis vu visuell Styles starten (dat ass wat CSS fir)
2. An Ärer CSS-Datei sidd Dir ugefaang wéi Dir normalerweis d'Form vun der Säit maacht an eng Basis fir wéi d'Websäit gesitt. Sot Dir datt d'Schrëftgréisst vun der Säit fir 16 Pixelen ass, da kënnt Dir dëse CSS schreiwen: Kierper {font-size: 16px; }}
3. Elo, Dir kënnt d'Schrëftgréisst erhéichen fir méi grouss Bildschirmer déi genuch Rees do hunn. Dëst ass wou Media Queries ofgeschnidden hunn. Dir wëllt e Medien Query starten: @media screen a (min-breed: 1000px) {}
4. Dëst ass d'Syntax vun engem Media Query. Et fänkt mat @media un, fir d'Medien Query selwer ze grënnen. Niewt Dir hutt de "Medienart", deen an dësem Fall "Bildschirm" ass. Dëst gëllt fir Desktop - Bildschirmer, Pëllen, Handyen, etc. Zu gudder lescht kënnt Dir d'Media Query mat der "Medienfunktioun" ophalen. An eisem Beispill hei, dat ass "mid-width: 1000px". Dëst bedeit datt d'Media Query fir Affichage mat enger Mindestbreedung vun 1000 Pixel breed ass.

1. Nodeems dës Elementer vum Media Query sinn, addéiere mer eng Ouverture a schliesslech Curly-Haft un deem wat Dir bei all normaler CSS-Regel gemaach hutt.
2. Den definitiven Schrëtt fir e Medien Query ass d'CSS-Regelen, déi Dir wëllt benotze fir dës Kéier zouzestellen. Dir addéiert dës CSS Regeleën tëschent den eckeg Klammeren, déi d'Media Query maachen, wéi: @media Bildschierm a (Min Breite: 1000px) {body {font-size: 20px; }}
3. Wann d'Konditiounen vun der Medien Query erreecht sinn (d'Browserfenêt ass op d'mannst 1000 Pixel breed), gëtt dëse CSS-Stil effektiv an d'Änneren vun eiser Schrëftgréisst änneren vun den 16 Pixelen, déi ursprünglech ursprénglech op eisem neie Wäert vun 20 Pixelen eegestallt ginn.

Mehr Styles änneren

Dir kënnt esou vill CSS-Regelen an dësem Media Query setzen, wéi Dir fir Äre visuelle Optriede vum Website benotzt. Zum Beispill, wann Dir net nëmmen d'Schrëftgréisst op 20 Pixel erhéicht huet, awer och d'Faarf vun all Paragrafen zu schwaarz (# 000000) änneren, da kënnt Dir dëst addéieren:

@media Bildschierm a (Minimum Breet: 1000px) {body {font-size: 20px; } p {color: # 000000; }}

Fannt méi Media Queries

Zousätzlech kënnt Dir méi Media Queries fir all gréissere Gréissten upassen, andeems Dir se an Ärem Stylblat wéi dës:

@media Bildschierm a (Minimum Breet: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @ screen an der Bildschiermung (Minimum Breet: 1400px) {body {font-size: 24px; }}

Déi éischt Media Queries géifen op 1000 Pixel breed maachen, Äert Schrëftgréisst änneren bis 20 Pixel. Dann, nodeems de Browser méi wéi 1400 Pixelen war, huet d'Schrëftgréisst nees op 24 Pixel geännert. Dir kënnt esou vill Medien Queries wéi néideg fir Är spezifesch Websäit dobäigesat ginn.

Min-Breed a Max-Breed

Et gi generell zwee Weeër fir Media Queries ze schreiwen - andeems Dir "Min-Breit" oder mat "Max-Breed" benotzt. Bis haut hu mir "min breed" an Aktiounen gesi gesinn. Dëst verursaacht datt d'Medien Queries effektiv nogoen wann e Browser mindestens sou minimale Breet erreecht huet. Also eng Ufro dass "Min-Breed: 1000px" benotzt, wann de Browser mindestens 1000 Pixel breed ass. Dëse Stil vun der Medien Query gëtt benotzt wann Dir e Site op "mobil-éischt" benotzt.

Wann Dir "max-width" benotzt, funktionéiert se op d'Géigendeel. Eng Medien Query vun "max-width: 1000px" géif aplaz ginn, wann de Browser ënnert dës Gréisst gefall ass.

Wat méi al Browser ugeet

Eng Erausfuerderung mat Medien Queries ass hire Manko an Ënnerstëtzung an al Versioune am Internet Explorer. Glécklech, et gëtt vereenzelt méi Fënsteren , déi d'Media Queries an deene méi ale Browser brénge kënnen, sou datt Dir se op Websäiten heuteg benotzt an trotzdem garantéieren datt d'Display vun där Websäit net méi al Browser'en benotzen.

Edited by Jeremy Girard op 1/24/17