A múltban a weboldal építése sokkal egyszerűbb volt. Ma egy weboldal elrendezésének nemcsak a számítógépekhez kell igazodnia, hanem táblagépekhez, mobileszközökhöz és még a tévékhez is.
Az adaptív elrendezésű weboldal készítését úgy hívják, hogy Responsive Web Design. A CSS Media lekérdezések pedig az adaptív tervezés egyik legfontosabb része. Ebben a cikkben közelebbről megvizsgáljuk a Média lekérdezéseket és a CSS-ben való felhasználásukat.
Ha szeretné, megtekintheti az alábbi videó verziót:
Mi az a média lekérdezés?
A Media lekérdezés egy CSS3 szolgáltatás, amely arra készteti a weboldalt, hogy elrendezését a különböző képernyőméretekhez és médiatípusokhoz igazítsa.
Szintaxis
@media media type and (condition: breakpoint) { // CSS rules }Különböző körülmények között megcélozhatunk különböző médiatípusokat. Ha a feltétel és / vagy a médiatípusok teljesülnek, akkor a média lekérdezésen belüli szabályok lesznek alkalmazva, különben nem.
A szintaxis az elején bonyolultnak tűnhet, ezért magyarázzuk el az egyes részeket egyenként, részletesen ...
@ Médiaszabály
A @media szabállyal kezdjük el meghatározni a média lekérdezéseket, és később a CSS szabályokat belefoglaljuk a göndör zárójelek közé. A @ media szabályt a megcélzott médiatípusok megadására is használják.
@media () { // CSS rules }Zárójel
A zárójelben feltételt szabunk. Például nagyobb betűméretet szeretnék alkalmazni a mobileszközökön. Ehhez meg kell adnunk egy maximális szélességet, amely ellenőrzi az eszköz szélességét:
.text { font-size: 14px; } @media (max-width: 480px) { .text { font-size: 16px; } }Normál esetben a szöveg mérete 14 képpontos lesz. Mivel azonban média lekérdezést alkalmaztunk, ez 16 képpontosra változik, ha egy eszköz maximális szélessége legfeljebb 480 képpont lehet.
Fontos: Mindig tegye a média lekérdezéseket a CSS fájl végére.
Médiatípusok
Ha nem alkalmazunk adathordozó-típust, akkor a @ media szabály alapértelmezés szerint minden típusú eszközt kiválaszt. Ellenkező esetben a médiatípusok közvetlenül a @ media szabály után következnek. Sokféle eszköz létezik, de 4 kategóriába sorolhatjuk őket:
- all - minden médiatípushoz
- nyomtatás - nyomtatók számára
- képernyő - számítógépes képernyőkhöz, táblagépekhez és okostelefonokhoz
- beszéd - a képernyőolvasók számára, akik hangosan „olvassák” az oldalt
Például, ha csak képernyőket akarok kiválasztani, akkor a képernyő kulcsszavát közvetlenül a @ media szabály után állítom be. Össze kell összefűznöm a szabályokat az „és” kulcsszóval:
@media screen and (max-width: 480px) { .text { font-size: 16px; } }Töréspontok
A töréspontok talán a leggyakoribb kifejezések, amelyeket hallani és használni fog. A töréspont kulcs annak meghatározásához, hogy mikor kell megváltoztatni az elrendezést és adaptálni az új szabályokat a média lekérdezéseken belül. Térjünk vissza az elején látható példánkra:
@media (max-width: 480px) { .text { font-size: 16px; } }Itt a töréspont 480px. Most a média lekérdezés tudja, mikor kell beállítani vagy felülírni az új osztályt. Alapvetően, ha egy eszköz szélessége kisebb, mint 480 képpont, akkor a szövegosztály kerül alkalmazásra, különben nem.
Gyakori töréspontok: Van-e standard felbontás?
Az egyik leggyakrabban feltett kérdés: „Melyik töréspontot használjam?”. Rengeteg eszköz van a piacon, ezért nem tudjuk, és nem kellene meghatározni mindegyikhez a rögzített töréspontokat.
Ezért nem mondhatjuk, hogy szabványos felbontás létezik az eszközök számára, de a napi programozásban vannak néhány általánosan használt töréspontok. Ha CSS keretrendszert használ (például Bootstrap, Bulma stb.), Akkor használhatja a töréspontjaikat is.
Most nézzünk meg néhány általános töréspontot az eszközök szélességéhez:
- 320 képpont - 480 képpont: mobil eszközök
- 481px - 768px: iPadek, táblagépek
- 769–1024 képpont: Kis képernyők, laptopok
- 1025–1200 képpont: asztali számítógépek, nagy képernyők
- 1201 képpont és több - Extra nagy képernyők, TV
Mint fentebb említettem, ezek a töréspontok eltérhetnek, és nincs pontosan meghatározva szabvány, de ezek közül néhányat gyakran használnak.
Csomagolás
Az adaptív tervezés elengedhetetlen a mai webtervezés és fejlesztés területén. A média lekérdezések az adaptív elrendezések elkészítésének egyik legfontosabb részét képezik, és remélem, hogy hozzászólásomat hasznosnak találja a média lekérdezések működésének megértéséhez.
Ha többet szeretne megtudni a webfejlesztésről, iratkozzon fel nyugodtan a csatornámra.
Köszönöm, hogy elolvasta!