Mielőtt túl sok időt töltene a monitor pontos felbontásának mérlegelésével, ne feledje, hogy az összes modern webdesign reagál, vagyis azt tervezték, hogy különböző képernyőfelbontások. Egyetlen kialakítással mindent támogatnia kell a legkisebb mobilképernyőktől az ultra HD asztali monitorokig.
Val vel reszponzív webdesign, általánosabb mobil-, táblagép- és asztali elrendezéseket hozhat létre. Az, hogy az egyes oldalelemek mikor és hogyan helyezkednek el a helyükön ezeknél az elrendezéseknél, az Önbe írt speciális töréspontok határozzák meg CSS. Ezeket a töréspontokat bizonyos általános képernyőfelbontások határozzák meg.
Bár nem fog konkrét felbontásokat megcélozni vagy fix méretet beállítani a tervekhez, figyelembe veszi a képernyőt felbontások a töréspontok létrehozásában és a zökkenőmentes átmenetek létrehozásában, így webhelye minden eszközön jól néz ki és kijelzo méret.
Általános asztali felbontások
- 1280x720 Standard HD - Lehet, hogy ezt jobban ismeri, mint 720p. Ez volt a szokásos HD felbontás, amikor a HD először vált általánossá. Valószínűleg nem fog sok új monitort találni ezzel a felbontással, de rengeteg van még a vadonban attól kezdve, hogy népszerűbbek lettek volna.
- 1366x768 - Valami szokatlan felbontású, de nagyon népszerű a kisebb laptopokban és néhány táblagépben. Ha alacsonyabb rendűekkel foglalkozol Chromebookok, jó esély van rá, hogy ezt a felbontást célozza meg.
- 1920x1080 A leggyakoribb - Ha asztali számítógépekre gondol, valószínűleg az 1920x1080, ismertebb nevén 1080p. Ez az állásfoglalás mindenhol jelen van. A legtöbb asztali monitor továbbra is 1080p, és rengeteg teljes méretű laptop is. A tájon is talál egy megfelelő arányú, 1080p felbontású táblagépet.
- 2560x1440 - Az 1440p egy újabb furcsa középút a monitor felbontású képén. Magasabb, mint amit 2k-nak tartanánk, de nem egészen 4k. Ez azt jelenti, hogy ez egy általános felbontás a játékmonitorok piacán, és megfizethető alternatíva a teljes 4k-s teljesítéshez. Webhelyétől függően lehet, hogy nem érdemes támogatni az 1440p-t.
- 3840x2160 A közeljövő - Ez teljes 4k vagy Ultra HD. Míg a 4k általában a felső kategóriás PC-k számára van fenntartva, az árak csökkennek, a grafikai technológia javul, és a 4k iránti keresletet a tévék piaca hajtja, ahol ez sokkal gyakoribb. Feltételezhető, hogy a következő néhány évben a 4k de facto szabványként könnyedén megelőzi az 1080p-t, ezért mindenképpen érdemes most 4K-val számolni.
Általános táblagép / fekvő felbontások
A táblagépek nem biztos, hogy olyan népszerűek, mint egykor, és úgy tűnik, hogy az egyre növekvő telefonméretek átalakítható laptopokkal jelentősen csökkentették piaci részesedésüket. A táblagép-felbontások elszámolása még mindig jelentősen átfedésben van az asztali számítógépekkel és a laptopokkal. Lehetséges, hogy táblagép-töréspontokat hozhat létre bizonyos zavaró elemek töréspontjainak létrehozásához, amelyek bizonyos felbontásoknál nem illenek jól.
- A portré módban tartott készülékeknél feltétlenül figyelembe kell venni a táblagép felbontását is. Nem mindenki böngészi a fekvő helyzetben lévő táblagépét, ezért hozzá kell adnia legalább egy töréspontot egy álló, álló helyzetben lévő táblagéphez.
- 1280x800 A korábban szokásos felbontás - Az idősebb tabletták, az alacsonyabb szintű tabletták és a kisebb táblagépek mindegyike általában rendelkezik az Amazon Fire táblagépeivel is, amelyek 1280x800-at használnak. Ez az egyik utolsó igazán mobil felbontás a táblagépeken.
- 1920x1200 általános 7 "és 8" táblagépeken - Tájképben legtöbbször ugyanazokra a töréspontokra támaszkodhat, mint az 1080p. Amikor azonban ezek egyikét látja a tájon, a helyzet sokkal másabb. Ez a felbontás sok 7 és 8 hüvelykes táblagép között gyakori, beleértve az Amazon Fire-t is.
- 2048x1536 Apple tabletta -Ez az Apple leggyakoribb táblagép-felbontása. Elég hasonlít az 1440p-hez, hogy nagyon kicsi legyen a különbség, de a portré megint szokatlan. Mindenesetre célszerű ezen a felbontáson tesztelni webhelyét, hogy az iPadeken semmi különös ne történjen.
A nagyobb felbontású táblagépek kezdenek bejutni az asztali területekre. Legtöbbször nem is kell elszámolni velük, mert a felbontás egy olyan tartományba esik, amelyet már elszámolt. Mindig jó ötlet azonban tesztelni, hogy teljesen biztosak legyünk benne.
Általános mobil felbontások
A mobileszközök kezelése könnyen a legbonyolultabb. Olyan sokféle eszköz létezik, beleértve a régebben használt eszközöket is. Nem könnyű lefedni mindet. Ezért olyan népszerű a mobil-első tervezés. A filozófia egyszerű. Először kezdje a legegyszerűbb mobiltervezéssel, és építsen rá nagyobb és nagyobb képernyőkhöz. Így még a legrégebbi és legkisebb eszközök is működnek, de kevesebb tartalommal és kevesebb funkcióval. A webhely nem akadályozott, egyszerűen csak a legfontosabb és leggyakrabban hozzáférhető információkat jeleníti meg először.
Itt van egy érdekes trükk a telefonok kezeléséhez; fordítsák oldalukra az asztali felbontásokat. Persze vannak szokatlan kiugrások, de a legtöbb jelenlegi telefon ezt a mintát követi.
- 720x1280 általános régebbi eszközökön - évek óta az oldalára fordított 720p volt a legelterjedtebb szabvány a mobil eszközön. Ebben az esetben nem kell aggódnia a fekvő mód miatt, mivel ez megegyezik az asztali 720p-vel. Csak fedje le a portré felbontást 720 pixel szélességgel.
- 1080x1920 középút - Az 1080p nagyon hosszú ideje a szabvány. Középkategóriás eszközökön még mindig nagyon gyakori. Ha csak egy mobil felbontást támogat, akkor ez az.
- 1440x2560 jelenlegi felső kategóriás - A mobil eszközök egyre nagyobbak, a képernyők pedig egyre nagyobb felbontásúak. Az 1440p érdekes szabvány, mert a képernyők szélessége sokféle - ebben az esetben hosszú -, amelyek ebbe a tartományba esnek. Mind asztali, mind mobil eszközökön a leggyakoribb az 1440x2560. Ez megadja a képernyőnek a közös 16: 9 képarányt. Mobilon ez kicsit kevésbé számít, mint az asztali számítógépek, mert az eszköz hossza nem sokban befolyásolja a terveket.
Mielőtt csak három mobil felbontást támogatna boldogan, azt is fel kell ismernie, hogy egyesek nevetségesen régi, apró képernyős telefonokat használnak. Mindig mélyebb minimális felbontást kell beépítenie annak érdekében, hogy webhelye jól nézzen ki annak is, aki több éve telefonál.
Egyszerű tippek, amelyeket szem előtt kell tartani
Könnyű összegyűjteni egy csomó tényt a képernyőfelbontásról, a lefolyásról és a tervek gúnyolódásának megkezdéséről, és pontosan akkor esik bajba. Néhány kulcsfontosságú ötletet érdemes szem előtt tartani, amikor webhelyet tervez, és ezek a legtöbb, ha nem az összes helyzetben igazak.
- Az adaptív tervezés folyékony - Érezheti azt a hajlandóságot, hogy hatalmas töréspont-tömböt építsen be a CSS-be, hogy minden lehetséges képernyőméretet és helyzetet figyelembe vegyen. Ez nagyszerű módja annak, hogy megőrjítse magát. Az adaptív webdesign elég rugalmas ahhoz, hogy pótolja a hiányosságokat és a szabálytalanságokat. Ha túl sok statikus számot határoz meg, függetlenül attól, hogy média lekérdezésben vannak-e, vagy maguk az elemek, akkor valószínűleg rossz úton halad.
- Az emberek nem mindig maximalizálják böngészőjüket - Ez a fajta együtt jár az előző ponttal. tudsz tervezés a képernyő méretéhez, de ha valaki nem maximalizálja a böngészőablakot, akkor mindez füstbe megy. Azáltal, hogy a dolgokat a tervezési folyadékban tartja, elkerülheti a böngészőablakok méretének különböző problémáit.
- Tesztelj mindent - Próbálja feltörni a webhelyét. Csak így találja meg azokat a hibákat és következetlenségeket, amelyek tönkreteszik a látogatók élményét. A Chrome beépített eszközöket kínál az eszközfelbontások tesztelésére, a népszerű eszközök teljes listájával. Mindig lehetősége van magára húzni a böngészőablakot különböző méretekbe, hogy lássa, hogyan néz ki a webhely különböző méretekben, és hogyan alkalmazkodik és hogyan törik össze.
- Ne várja el, hogy a felhasználók a legfrissebbek és a legnagyobbak legyenek - Ez a régebbi telefonokkal és a kis felbontásokkal kapcsolatos előző pontra vezethető vissza. Nem számíthat arra, hogy az emberek új eszközökkel rendelkeznek. Ez vonatkozik mind a képernyőfelbontásra, mind a feldolgozási teljesítményre. Túl sok grafikával és túl sok grafikával rendelkező webhely betöltése JavaScript jó módszer arra, hogy a lassú eszközzel rendelkező embereket elhagyják, és soha többé ne térjenek vissza.