9 Advanced Media Query CSS-trükkök, amelyeket tudnia kell

A használható, hozzáférhető élmény elengedhetetlen egy sikeres webhelyhez. Ha olvasóinak pozitív tapasztalataik vannak, nagyobb valószínűséggel hajtanak végre cselekvésre való felhívást, beleértve a termékek vásárlását is. Emellett nagyobb valószínűséggel térnek vissza, vagy ajánlják másoknak az Ön webhelyét. A tapasztalat kulcsfontosságú.

A médialekérdezések különféle CSS-szolgáltatásokat kínálnak, amelyek testreszabhatják webhelyét. Lehetővé teszik, hogy az egyes felhasználók élményét az eszközük képességei alapján szabja személyre. Tanulja meg, hogyan biztosíthatja olvasóinak a legjobb élményt, akár telefonjukat, akár nagy asztali monitort használnak.

1. A mutató funkció

Az @médiaszabály mutató funkcióval rendelkezik, amely lehetővé teszi a tervezés testreszabását az elsődleges mutatóeszköz alapján. Tesztelheti a rendelkezésre állást és a minőséget.

Ez a mutató média lekérdezés funkció három érték valamelyikét veszi fel: nincs, durva vagy finom. Az egyik sem érték akkor érvényes, ha nincs mutatóeszköz. Az

durva Az érték akkor érvényes, ha az elsődleges mutatóeszköz pontossága csökkent. És a bírság érték akkor érvényes, ha az elsődleges mutatóeszköz nagy pontosságú.

A mutató funkció használata

Választási lehetőségek: 
 1. lehetőség
 Második lehetőség

A fenti kód két bemeneti rádiólehetőséget generál, amelyek a számítógép elsődleges mutatóeszközének pontosságától függően változnak.

A pontos (vagy jó minőségű) elsődleges mutatóeszközzel rendelkező számítógép a következő weboldalt jeleníti meg:

Egy korlátozott pontosságú (vagy gyenge minőségű) elsődleges eszközzel rendelkező számítógép a következő weboldalt jeleníti meg:

A korlátozott pontosságú elsődleges mutatóeszközzel rendelkező eszköz nagyobb rádiógombokkal rendelkezik. Ez jobb felhasználói élményt biztosít az ilyen felhasználók számára. A pointer funkcióval biztosíthatja, hogy minden felhasználója kellemes élményben legyen, készülékétől függetlenül.

2. A tetszőleges mutató funkció

A mutató funkcióhoz hasonlóan a tetszőleges mutatós médialekérdezési funkció a mutatóeszközöket célozza meg. Az any-pointer szolgáltatás azonban a számítógép minden mutatóeszközét kiértékeli. A tetszőleges mutató funkció is használja a egyik sem, durva, és bírság értékeket.

A tetszőleges mutató funkció használata

 @média (bármilyen mutató: rendben) {
 bemenet[típus="rádió"] {
 szélesség: 15 képpont;
 magasság: 15px;
 határsugár: 20 képpont;
 keret szélessége: 1 képpont;
 }
 }
@média (bármely mutató: durva) {
 bemenet[típus="rádió"] {
 szélesség: 25 képpont;
 magasság: 25px;
 határsugár: 20 képpont;
 keret szélessége: 2 képpont;
 }
 }

A fenti kódot egyszerűen lecserélheti a kód médialekérdezési szakaszára a mutató funkció példájában. A fenti kód megfelelő megjelenítést biztosít a számítógépen található mutatóeszközök minősége alapján.

3. A lebegő funkció

A lebegtetett médialekérdezés funkció kiértékeli, hogy az eszköz elsődleges beviteli mechanizmusa képes-e az egérmutatót a felhasználói felület elemei fölé vinni.

A lebegő funkció használata

 /* CSS */
 a{
 szöveg-dekoráció: nincs;
 fekete szín;
 }
 @media (lebegés: lebeg) {
 a: lebeg {
 szín: kék;
 }
 }
 HTML 
 Link elem

A fenti kód egy elem. A színe megváltozik (feketéről kékre), amikor egy eszköz elsődleges beviteli mechanizmusa (amely támogatja a lebegést) föléje kerül.

4. A tetszőleges lebegtetés funkció

Az tetszőleges lebegés a médialekérdezés bármely beviteli mechanizmust megcéloz, beleértve az elsődleges beviteli mechanizmust is.

Az any-hover funkció használata

@média (bármilyen lebegés: lebeg) {
 a: lebeg {
 szín: kék;
 }
 }

A fenti médialekérdezés lebegtetési effektust hoz létre minden olyan beviteli mechanizmushoz, amely képes egy elem felett lebegni.

5. A felbontás funkció

A felbontású médialekérdezési szolgáltatás kiszámítja az adott eszköz által megjelenített képpontok számát. Egy hüvelykenként több pixelt megjelenítő eszköz jobb felbontással rendelkezik, mert részletesebben jeleníti meg a képeket. Ez a funkció segíthet a fejlesztőnek eldönteni, hogy mely eszközfelhasználók láthatják tisztábban a felhasználói felület elemeit.

A felbontás funkció tartományt használ. Ez azt jelenti, hogy valamint a felbontás kulcsszót használhatja min-felbontás és max felbontású. A médialekérdezés felbontási funkciója a felbontás adattípusához tartozik. Ez azt jelenti, hogy a felbontás három mértékegységben mérhető: pont per hüvelyk (dpi), pont per centiméter (dpcm) vagy pont per pixel (dppx).

A felbontás funkció használata

/* CSS */
@media (min. felbontás: 72dpi) {
 p {
 fehér szín;
 háttérszín: kék;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Az eszköz legalacsonyabb felbontása, amely még mindig minőségi képeket képes megjeleníteni, 72 dpi. Tehát, ha egy eszköz felbontása 72 dpi vagy nagyobb, akkor a következő kimenetet jeleníti meg a böngészőjében:

6. A tájolási funkció

Egy eszköz nézetablakának csak két tájolása lehet: portré vagy tájkép. Megjegyzendő, hogy a nézetablak tájolása eltér az eszköz tájolásától. Ha egy eszköz puha billentyűzetet használ, a nézete állóról fekvőre változhat, miközben maga az eszköz még álló helyzetben van.

A tájolási funkció használata

/* CSS */
 test{
 kijelző: flex;
 }
 szakasz{
 szegély: 2px egyszínű kék;
 padding: 3px;
 margó: 3px;
 }
 @média (tájolás: fekvő) {
 body {
 flex-irány: sor;
 }
 }
@média (tájolás: álló) {
 body {
 hajlítási irány: oszlop;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

A fenti kód megváltoztatja a weboldal elrendezését az eszköz tájolásának megfelelően.

A fekvő módban lévő nézetablakkal rendelkező eszköz a következő weboldalt jeleníti meg:

Az álló módban lévő nézetablakkal rendelkező eszköz a következő weboldalt jeleníti meg:

7. A magasság funkció

A magassági média lekérdezési funkció lehetővé teszi a CSS-stílus megadását a felhasználó eszközének nézetablak magassága alapján. Ez a funkció támogatja a hatótávolságot, így Ön is használhatja a min-magasság és maximum magasság kulcsszavakat.

A magasság funkció használata

 /* CSS */
 @média (min. magasság: 360 képpont) {
 p{
 szegély: 2px pontozott narancssárga;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

A fenti kód személyre szabja, hogy mit lát a felhasználó az eszköz magassága alapján. A legalább 360 képpont magasságú felhasználók a következő weboldalhoz hasonlót fognak látni:

A 360 képpont alatti magasságú eszközök nem jelenítik meg a szegélyt a weboldalon a bekezdés körül.

8. A szélesség jellemző

A szélességű médialekérdezés funkció lehetővé teszi, hogy konkrét CSS-stílusokat hozzon létre a felhasználó eszközének nézetablak szélessége alapján. Ez a funkció a hatótávolságot is támogatja, így lehetősége van a min-szélesség és max szélesség kulcsszavakat.

A szélesség funkció használata

 /* CSS */
 @média (min. szélesség: 600 képpont) {
 p{
 szegély: 2px tömör lila;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

A fenti kód személyre szabja, hogy a felhasználó mit lásson az eszköz szélessége alapján. A legalább 600 képpont szélességű felhasználók a következő weboldalhoz hasonlókat látnak:

A szélesség és magasság alapú médialekérdezések használata hatékony stratégia lehet reszponzívvá téve webhelyét.

9. A szín jellemzője

A színes média lekérdezési szolgáltatás kiértékeli az eszköz színösszetevőjét (piros, zöld, kék). Az érték arra vonatkozik, hogy a megjelenített hány bitet használ az egyes komponensekhez, ami meghatározza, hogy hány különböző színt tud megjeleníteni. A modern eszközök jellemzően 24 bites kijelzőt használnak, amely színkomponensenként nyolc bitet használ. Ez is egész számot vesz fel, ahol a színtelen eszköz nulla.

A szín funkció is használja a min-szín és max-szín tartományok.

A színfunkció használata

 /* CSS */
 @média (min-szín: 7) {
 p{
 szegély: 2px folyamatos zöld;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

A hét vagy annál nagyobb színösszetevővel rendelkező eszközök a következő kimenetet jelenítik meg a böngészőjükben:

Most egyedi felhasználói élményeket hozhat létre

Ezeket a speciális médialekérdezéseket képesnek kell lennie arra, hogy javítsa az Ön webhelyét vagy alkalmazását felkereső felhasználók élményét. Fontos, hogy a mobilfelhasználók és az asztali számítógépek felhasználói egyaránt pozitív élményben részesüljenek webhelyén.

A médialekérdezések nem az egyedüli CSS-eszközök, amelyek erősíthetik fejlesztői készségeit.

8 alapvető CSS-tipp és trükk, amelyet minden fejlesztőnek tudnia kell

Olvassa el a következőt

A szerzőről