Média lekérdezések használata HTML-ben és CSS-ben érzékeny webhelyek létrehozásához

Ha weboldalakat / webalkalmazásokat szeretne fejleszteni, akkor elengedhetetlen a sikerhez az, hogy miként készítsen adaptív terveket.

Korábban a különböző képernyőméretekhez jól alkalmazkodó weboldalak létrehozása olyan luxus volt, amelyet a weboldal tulajdonosainak egy fejlesztőtől kellett kérniük. Az okostelefonok és táblagépek használatának növekedése azonban az adaptív tervezés szükségszerűvé tette a szoftverfejlesztés világát.

A média lekérdezésekkel a legjobb módja annak, hogy a webhely / webalkalmazás minden eszközön pontosan úgy jelenjen meg, ahogyan szeretné.

Az adaptív tervezés megértése

Dióhéjban az adaptív tervezés a HTML / CSS használatával foglalkozik egy weboldal / webalkalmazás-elrendezés létrehozásával, amely alkalmazkodik a különböző képernyőméretekhez. A HTML / CSS-ben néhány különböző módon lehet reagálni a weboldal tervezésében:

• Rem és em egységek használata pixelek helyett (px)
• Az egyes weboldalak nézetablakának / méretarányának beállítása
• Média lekérdezések használata

A média lekérdezés a CSS egyik jellemzője, amelyet a CSS3 verzióban adtak ki. Ennek az új szolgáltatásnak a bevezetésével a CSS felhasználói elsajátíthatják a weboldal megjelenítését az eszköz / képernyő magassága, szélessége és tájolása (fekvő vagy álló mód) alapján.

Olvass tovább: Az Essential CSS3 Properties csalólap

A média lekérdezések keretet nyújtanak a kód egyszeri létrehozásához és a program többszörös felhasználásához. Ez nem tűnik annyira hasznosnak, ha csak három weboldallal rendelkező webhelyet fejleszt, de ha igen több száz különböző weboldallal rendelkező vállalatnál dolgozik - ez hatalmas időnek bizonyul megmentő.

Számos különböző dolgot kell figyelembe vennie a média lekérdezések használatakor: felépítés, elhelyezés, tartomány és összekapcsolás.

Csak @media / nem médiatípus és (kifejezés) {
/ * CSS kód * /
}

A média lekérdezés általános felépítése a következőket tartalmazza:

• A @media kulcsszó
• A nem / csak kulcsszó
• Médiatípus (amely lehet képernyő, nyomtatott vagy beszédes)
• Az „és” kulcsszó
• Zárójelbe zárt egyedi kifejezés
• CSS-kód pár nyitott és záró göndör zárójelbe.

Összefüggő: A CSS használata a dokumentumok nyomtatáshoz való formázásához

Csak a @media képernyő és (max. szélesség: 450 képpont) {
test{
háttérszín: kék;
}
}

A fenti példa a CSS-stílusot (különösen a kék háttérszínt) csak azokra az eszközképernyőkre alkalmazza, amelyek szélessége legfeljebb 450 képpont, tehát alapvetően okostelefonok. Az „egyetlen” kulcsszó helyettesíthető a „nem” kulcsszóval, és akkor a fenti média lekérdezés CSS-stílusa csak a nyomtatásra és a beszédre vonatkozik.

Alapértelmezés szerint azonban egy általános adathordozó-lekérdezés deklaráció mind a három adathordozó-típusra vonatkozik, így nincs szükség adathordozó-típus megadására, hacsak nem egy vagy több kizárása a cél.

/ * okostelefonok kialakítása * /
@media (max-szélesség: 450px) {
test{
háttérszín: kék;
}
}

A média lekérdezés CSS tulajdonság; ezért csak a stílus nyelvén belül használható. Háromféleképpen lehet a CSS-t a kódba felvenni; ezek közül azonban csak két módszer kínál praktikus módot a média lekérdezések programba történő felvételére - belső vagy külső CSS-re.

A belső módszer magában foglalja a

A külső módszer magában foglalja a média lekérdezés létrehozását egy külső CSS fájlban, és a HTML fájlhoz való összekapcsolását a címke.

Függetlenül attól, hogy a média lekérdezéseket belső vagy külső CSS-en keresztül használják-e, a stílus nyelvének egy fő szempontja hátrányosan befolyásolhatja a média lekérdezés működését. A CSS-ben elsőbbségi sorrend van. Ha a CSS választó, vagy ebben az esetben média lekérdezés, a CSS fájlba felvett minden új média lekérdezés felülírja (vagy elsőbbséget élvez) az előzőnél.

A fentiekben megadott alapértelmezett média lekérdezési kód az okostelefonokat célozza (450 képpont széles és alacsonyabb), tehát ha a beállítani szeretné a táblagépek eltérő háttere, úgy gondolhatja, hogy egyszerűen hozzáadja a következő kódot a már meglévő CSS-fájljához.

/ * tabletek kialakítása * /
@media (max. szélesség: 800 képpont) {
test{
háttérszín: piros;
}
}

Az egyetlen probléma az, hogy az elsőbbség sorrendje miatt a táblagépeknek piros háttérszíne lenne, az okostelefonoknak pedig most is piros a háttérszínük, mivel a 450 képpontos és az alatti képpontok 800 képpont alattiak.

A kis probléma megoldásának egyik módja az lenne, ha hozzáadnánk a táblagépek média lekérdezését az okostelefonok előtt; ez utóbbi felülírná az előbbit, és most kék okostelefonokkal és piros háttér színű táblagépekkel rendelkezne.

Van azonban egy jobb módja annak, hogy az okostelefonok és a táblagépek külön stílusozhassanak anélkül, hogy aggódnának a fontossági sorrend miatt. Ez a média lekérdezések olyan jellemzője, amelyet tartományspecifikációnak neveznek, ahol a fejlesztő létrehozhat egy média lekérdezést a legnagyobb és a legkisebb szélességgel (a tartomány).

/ * tabletek kialakítása * /
@media (max-width: 800px) és (min-width: 451) {
test{
háttérszín: piros;
}
}

A fenti példával a média lekérdezések elhelyezése egy stíluslapon lényegtelenné válik, mivel a táblagépek és az okostelefonok kialakítása két külön szélességű gyűjteményt céloz meg.

Ha nem szeretne média lekérdezéseket beágyazni a CSS-kódjába, akkor használhat egy alternatív módszert. Ez a módszer magában foglalja a média lekérdezések használatát a HTML fájl címkéje, tehát ahelyett, hogy egy masszív stíluslap lenne, amely tartalmazza a stílus stílusbeállításait okostelefonok, táblagépek és számítógépek - három külön CSS fájlt használhat, és média lekérdezéseit itt hozhatja létre a címke.

A tag egy HTML elem, amelyet a CSS stílus importálásához használnak egy külső stíluslapról. Ennek a címkének van egy olyan média tulajdonsága, amely ugyanúgy működik, mint a média lekérdezése a CSS-ben.

 fő stíluslap 

 táblagép stíluslap 
href = "tablet.css">
 okostelefon stíluslap 

A fenti kódot a

HTML fájljának címkéje. Most már csak annyit kell tennie, hogy három külön CSS fájlt hoz létre a main.css, tablet.css és smartphone.css fájlnevekkel - majd létrehozza azt a sajátos kialakítást, amelyet az egyes eszközökhöz kíván.

A fő fájl stílusa minden képernyőre vonatkozik, amelynek szélessége meghaladja a 800 képpontot, a táblagép fájl stílusa pedig érvényes lesz minden képernyőre, amelynek szélessége 450 és 801 képpont között van, és az okostelefon fájl stílusa az alábbi összes képernyőre érvényes lesz 451px.

Ha a cikk végére ért, megtudhatta, mi az adaptív tervezés, és miért hasznos. Mostantól azonosíthatja és használhatja a média lekérdezéseket CSS és HTML fájlokban. Ezenkívül megismerkedett a CSS elsőbbségi sorrendjével, és látta, hogy ez hogyan befolyásolhatja a média lekérdezések működését.

Kép jóváírása: Negatív tér /Pexels

Háttérkép beállítása CSS-ben

A CSS egy hatékony eszköz a weboldalak stílusához. A háttérkép elhelyezésének megtanulása sok CSS alapismeretet tanít meg.

Olvassa el a következőt

A szerzőről