Hogyan írhat CSS médiakérdeket?

A szintaxis mind a minimális szélességű, mind a maximális szélességű média lekérdezéseknél

A válaszadó webes tervezés olyan weboldalak építésének megközelítési módja, ahol ezek az oldalak dinamikusan változtathatják meg elrendezésüket és megjelenésüket a látogató képernyőméretén alapulva . A nagyméretű képernyők a nagyobb kijelzőkhöz megfelelő elrendezést kaphatnak, míg a kisebb eszközök, például a mobiltelefonok ugyanazt a weboldalt kapják, amely a kisebb képernyőhöz megfelelő módon lett formázva. Ez a megközelítés jobb felhasználói élményt nyújt minden felhasználó számára, és még javíthatja a keresőmotorok rangsorolását . A reagáló webdesign fontos része a CSS Media Queries.

A média lekérdezések olyanok, mint a kis feltételes nyilatkozatok a webhelyén található CSS-fájlban, amelyek lehetővé teszik bizonyos CSS-szabályok beállítását, amelyek csak akkor válnak hatásossá, ha bizonyos feltételek teljesülnek - például, ha a képernyőméret bizonyos küszöbértékek fölött vagy alatt van.

Médiakérdések a műveletben

Szóval hogyan használhatja a Media Queries weboldalt? Itt egy nagyon egyszerű példa:

1. Minden olyan vizuális stílustól mentes, jól strukturált HTML-dokumentumot kezdene (ez a CSS)
2. A CSS-fájlban az oldal formázásával kezdődik, és normál alapot ad meg a webhely megjelenésének módjára vonatkozóan. Mondja meg, hogy az oldal betűmérete 16 képpont lenne, ezt a CSS-t írhatod: body {font-size: 16px; }
3. Nos, növelni szeretné azt a betűméretet nagyobb képernyőkhöz, amelyek bőséges ingatlanokkal rendelkeznek. Ezzel kezdődik a Media Queries. Ezzel a médiakérdéssel kezdene: @media képernyő és (min-width: 1000px) {}
4. Ez a Media Query szintaxisa. A @media segítségével elindul a Media Query. Ezután beállítja a "média típusát", amely ebben az esetben "képernyő". Ez vonatkozik az asztali számítógép képernyőkre, táblagépekre, telefonokra stb. Végül a médiakérdezést a "média funkcióval" befejezte. A fenti példánkban a "közepes szélesség: 1000px". Ez azt jelenti, hogy a Media Query bemozdul a minimális szélességű, 1000 pixel széles képernyőre.

1. A Media Query ezen elemei után hozzáad egy nyitó és záró gömbölyget, hasonlóan ahhoz, amit bármely normál CSS szabályban megtenne.
2. A média lekérdezés utolsó lépése, ha az adott feltétel teljesül, alkalmazni kívánja a CSS-szabályokat. Ezeket a CSS-szabályokat a Media Query-t alkotó göndes zárójelek között adja hozzá, például: @media képernyő és (min-width: 1000px) {body {font-size: 20px; }
3. Amikor a Media Query feltételei teljesülnek (a böngészőablak legalább 1000 képpont széles), ez a CSS-stílus hatással lesz arra, hogy megváltoztassuk a webhely fontméretét a 16 képpontról, amelyet eredetileg az új 20 képpontos értékre állítottunk be.

Több stílus hozzáadása

A Média-lekérdezésben annyi CSS-szabályt helyezhet el, amennyire szükséges a weboldal vizuális megjelenésének módosításához. Például, ha nemcsak a betűméretet 20 képpontra szeretné növelni, hanem az összes bekezdés színét is megváltoztatná (# 000000), akkor hozzáadhatja ezt:

@media képernyő és (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; }}

További médiakérdések hozzáadása

Ezenkívül minden nagyobb mérethez további Médiakérdeket adhat hozzá, és ehhez hozzáadhatja a stíluslapot:

@media képernyő és (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media képernyő és (min-width: 1400px) {body {font-size: 24px; }}

Az első médiakérdések 1000 képpontos méretűek, a betűméretet 20 képpontra változtatva. Ezután, ha a böngésző 1400 képpont felett van, a betűméret 24 pixelre változik. Hozzáadhat annyi médiakérmet, amennyit az adott weboldalhoz szükséges.

Min-szélesség és Max-Width

Általában kétféle módon írható a Media Queries - a "min-width" vagy a "max-width" használatával. Eddig láttuk a "min-szélesség" -et a cselekvésben. Ezzel a médiakérdések akkor lépnek életbe, ha a böngésző elérte legalább a minimális szélességet. Tehát egy "min-width: 1000px" lekérdezést kell alkalmazni, ha a böngésző legalább 1000 képpont széles. Ez a Media Query stílust akkor használja, ha egy webhelyet "mobil-első" módon épít.

Ha a "max-width" értéket használja, az ellentétes módon működik. A "max-width: 1000px" média lekérdezés akkor alkalmazható, ha a böngésző e méret alá esett.

Régebbi böngészők esetében

A Media Queries egyik kihívása az, hogy nincs támogatásuk az Internet Explorer korábbi verzióiban. Szerencsére léteznek olyan polipillák, amelyek javíthatják a Media Queries támogatását azokban a régebbi böngészőkben, amelyek lehetővé teszik számukra a weboldalakon történő használatukat, miközben biztosítja, hogy a webhely megjelenése ne nézzen ki régebbi böngészőprogramokban.

Szerkesztette: Jeremy Girard, 1/24/17