Home-theater-designers
Ha weboldalakat/webalkalmazásokat szeretne fejleszteni, akkor a sikerhez elengedhetetlen a reszponzív tervek létrehozásának ismerete.
Korábban a különböző képernyőméretekhez jól alkalmazkodó webhelyek létrehozása luxus volt, amelyet a webhelytulajdonosoknak kellett kérniük egy fejlesztőtől. Azonban az okostelefonok és táblagépek használatának felfutása mára szükségessé tette a reszponzív tervezést a szoftverfejlesztés világában.
A médialekérdezések használata a legjobb módszer annak biztosítására, hogy webhelye/webalkalmazása minden eszközön pontosan úgy jelenjen meg, ahogy szeretné.
A reszponzív tervezés megértése
Dióhéjban a reszponzív tervezés a HTML/CSS használatával foglalkozik a különböző képernyőméretekhez alkalmazkodó webhely/webes alkalmazás elrendezésének létrehozásával. A HTML/CSS -ben néhány különböző módon lehet elérni a weboldal tervezésének reagálóképességét:
- 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édialekérdezések használata
Mik azok a médialekérdezések?
A médialekérdezés a CSS egyik jellemzője, amelyet a CSS3 verzióban adtak ki. Ennek az új funkciónak a bevezetésével a CSS felhasználói megszerezhetik 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.
Bővebben: Az Essential CSS3 Properties Cheat Sheet
A médialekérdezések keretet biztosítanak a kód egyszeri létrehozásához és többszörös használatához a program során. Ez talán nem tűnik olyan hasznosnak, ha csak három weblappal rendelkező webhelyet fejleszt, de ha több száz különböző weboldallal rendelkező cégnél dolgozik - ez hatalmas időmegtakarításnak bizonyul.
Médialekérdezések használata
A médialekérdezések használatakor számos különböző dolgot kell figyelembe vennie: szerkezet, elhelyezés, tartomány és linkelés.
A médialekérdezések felépítése
Példa egy médialekérdezési struktúrára
@media only/not media-type and (expression){
/*CSS code*/
}A médialekérdezés általános szerkezete a következőket tartalmazza:
- A @media kulcsszó
- A nem/csak kulcsszó
- Médiatípus (lehet képernyő, nyomtatott vagy beszéd)
- A kulcsszó és
- Egyedi kifejezés zárójelben
- CSS kód nyitott és záró göndör zárójelek közé zárva.
Összefüggő: A CSS használata dokumentumok formázásához nyomtatáshoz
Példa médialekérdezésre az egyetlen kulcsszóval
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}A fenti példa csak a 450px vagy annál kisebb szélességű készülékek képernyőire vonatkozik (főleg kék háttérszínre), tehát alapvetően okostelefonokra. Az egyetlen kulcsszó helyettesíthető a nem kulcsszóval, és a CSS stílus a fenti médialekérdezésben csak a nyomtatásra és a beszédre vonatkozik.
Alapértelmezés szerint azonban az általános médialekérdezési nyilatkozat mindhárom adathordozó -típusra vonatkozik, így nincs szükség adathordozó -típus megadására, kivéve, ha a cél egy vagy több közülük kizárása.
Példa az alapértelmezett médialekérdezésre
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}A médialekérdezések elhelyezése
A médialekérdezés egy CSS -tulajdonság; ezért csak a stílusnyelven belül használható. Három különböző módon lehet a CSS -t kódba foglalni; e módszerek közül azonban csak kettő kínál gyakorlati módot a médialekérdezések programba való beépítésére - belső vagy külső CSS.
A belső módszer magában foglalja a címke hozzáadását a HTML -fájl címkéjéhez, és a médialekérdezés létrehozását a címke paraméterein belül.
A külső módszer magában foglal egy médialekérdezés létrehozását egy külső CSS -fájlban, és a címkén keresztül összekapcsolja azt a HTML -fájljával.
A médialekérdezések köre
Függetlenül attól, hogy a médialekérdezéseket belső vagy külső CSS -en keresztül használják -e, a stílusnyelv egyik fő aspektusa hátrányosan befolyásolhatja a médialekérdezés működését. A CSS rendelkezik elsőbbségi sorrenddel. CSS -választó vagy ebben az esetben médialekérdezés használatakor a CSS -fájlhoz hozzáadott minden új médialekérdezés felülírja (vagy elsőbbséget élvez) az előzővel.
A fenti alapértelmezett médialekérdezési kód az okostelefonokat célozza (450 képpont széles és annál kisebb), így ha más hátteret szeretne beállítani a táblagépekhez, akkor azt gondolhatja, hogy egyszerűen hozzáadhatja a következő kódot a már meglévő CSS-fájlhoz.
Példa a táblagép lekérdezésére
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
Az egyetlen probléma az, hogy az elsőbbségi sorrend miatt a táblagépek vörös háttérszínt kapnának, és az okostelefonok most is vörös háttérszínt kapnának, mert a 450 képpont alatti kép 800 képpont alatti.
Ennek a kis problémának az egyik módja az lenne, ha hozzáadnánk a táblagépek médialekérdezését az okostelefonokéhoz; az utóbbi felülírná az előbbit, és most már kék háttérszínű okostelefonjai és piros háttérszínű táblagépei lennének.
Van azonban egy jobb módszer az okostelefonok és táblagépek külön stílusának elérésére anélkül, hogy aggódnánk az elsőbbségi sorrend miatt. Ez a tartomány -specifikációként ismert médialekérdezések egyik jellemzője, ahol a fejlesztő létrehozhat egy médialekérdezést a maximális és minimális szélességgel (tartomány).
Példa táblagépes lekérdezés tartományra
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
A fenti példával a médialekérdezések stíluslapon belüli elhelyezése lényegtelenné válik, mivel a táblagépek és okostelefonok tervezése két különböző szélességű gyűjteményt céloz meg.
Link média lekérdezések
Ha nem szeretné beágyazni a médialekérdezéseket a CSS -kódjába, akkor használhat egy alternatív módszert. Ez a módszer magában foglalja a médialekérdezések használatát egy HTML -fájl címkéjében, így ahelyett, hogy egyetlen hatalmas stíluslapot tartalmazna, amely tartalmazza az okostelefonok, táblagépek és számítógépek stílusbeállításait - használhat három különálló CSS -fájlt, és létrehozhatja a médialekérdezéseket a címkében.
A címke egy HTML -elem, amelyet a CSS stílusok külső stíluslapból történő importálására használnak. Ennek a címkének olyan médiatulajdonsága van, amely ugyanúgy működik, mint a médialekérdezés a CSS -ben.
Médialekérdezések használata a Link címke példában
href='tablet.css'>
A fenti kódot a HTML -fájl címkéjében kell elhelyezni. Most már csak három különálló CSS -fájlt kell létrehoznia a main.css, tablet.css és smartphone.css fájlnévvel, majd létre kell hoznia az egyes készülékekhez kívánt egyedi kialakítást.
A főfájl stílusa minden képernyőre vonatkozik, amelynek szélessége nagyobb, mint 800 képpont, a táblagépfájl stílusa pedig minden képernyőre vonatkozik, amelyek szélessége 450 és 801 képpont között van, és az okostelefon fájlban szereplő stílus minden alábbi képernyőre vonatkozik. 451 képpont.
hova mehetek kinyomtatni valamit
Most megvannak az eszközei a reszponzív minták létrehozásához
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édialekérdezéseket CSS és HTML fájlokban. Ezenkívül megismerkedett a CSS elsőbbségi sorrendjével, és látta, hogyan befolyásolhatja a médialekérdezések működését.
Kép jóváírása: Negatív tér/ Pexels
Részvény Részvény Csipog Email Háttérkép beállítása a CSS -benA CSS hatékony eszköz a weboldalak formázására. A háttérkép elhelyezésének megtanulása sok CSS alapot megtanít.
Olvassa tovább Kapcsolódó témák- Programozás
- Webfejlesztés
- Web Design
- CSS
Kadeisha Kean Full Stack szoftverfejlesztő és műszaki/technológiai író. Megvan az a képessége, hogy leegyszerűsítse a legösszetettebb technológiai fogalmakat; olyan anyagot állít elő, amelyet minden technológiai kezdő könnyen megért. Szenvedélyesen ír, érdekes szoftvereket fejleszt és utazik a világban (dokumentumfilmeken keresztül).
Bővebben: Kadeisha KeanIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide