a mai világban, van egy rengeteg eszköz az emberek közül lehet választani, és ez lehet ijesztő, hogy megpróbálja befogadni és építeni a legjobb tapasztalatok minden eszközön. Fontos azonban, hogy naprakészen maradjunk a legnépszerűbb képernyőméretekkel és felbontásokkal, amikor web-és mobiloldalakat tervezünk. Az optimalizált és érzékeny webhely megkönnyíti a felhasználói áramlást, végül pedig élvezetes élményt nyújt a közönség számára.,
képernyőméret, felbontás és nézetablak: mit jelent mindez?
eszköz vásárlásakor gyakran látni fogja mind a képernyő méretét, mind a felbontást a specifikációkban. A screensize a fizikai mérés átlósan a képernyő hüvelykben. Ezt nem szabad összekeverni a felbontással,amely a képernyőn gyakran megjelenített képpontok száma magasság szerint (azaz 1024×768). Mivel az azonos képernyőméretű eszközök nagyon eltérő felbontással rendelkezhetnek, a fejlesztők a viewports-ot használják mobilbarát oldalak létrehozásakor., A Viewports a felbontások skálázott verziói, amelyek lehetővé teszik a webhelyek következetesebb megtekintését a különböző eszközökön. A nézetportok gyakran szabványosabbak és kisebbek, mint a felbontásméretek.
míg az asztali és laptop kijelzők fekvő tájolásúak (szélesebbek, mint a magasak), sok mobileszköz elforgatható, hogy megjelenítse a webhelyeket mind fekvő, mind álló (magasabb, mint széles) tájolásban. Ez azt jelenti, hogy a tervezőknek és a fejlesztőknek tervezniük kell ezeket a különbségeket.
segítségre van szüksége annak meghatározásában, hogy webhelye reagál-e? Használja a szabad MG eszköz, Érzékeny Design Checker.,
míg az asztali és laptop kijelzők fekvő tájolásúak (szélesebbek, mint a magasak), sok mobileszköz elforgatható, hogy megjelenítse a webhelyeket mind fekvő, mind álló (magasabb, mint széles) tájolásban. Ez azt jelenti, hogy a tervezőknek és a fejlesztőknek tervezniük kell ezeket a különbségeket.
érzékeny stílus
a vállalkozások számára szinte lehetetlen lenne minden egyes eszközhöz tervezni. Ehelyett a reszponzív tervek programozásakor a fejlesztők gyakran:
- csoportosítják a stílusokat a telefonok, táblagépek és asztali számítógépek legjellemzőbb eszközméreteire., Ebben az esetben, nagyobb, mint 7 cm általában megjelenik a desktop állásfoglalás, vagy
- a töréspontok (meghatározott pixel szélességű, hogy a kijelzőn, állítsa be elrendezés alapján képernyő méret) függ a tervezés, elrendezés
Néha, egy fejlesztő lehet választani, hogy összekapcsolják a két módszer, ha szükségesnek tartják. Javasoljuk, hogy kezdje a tipikus eszközméretek csoportosításával.
Ha fejlesztő vagy, és a mobil vagy reszponzív stílus kezeléséhez szükséges stílusokat szeretné létrehozni, az alábbiakban egy CSS-részletet tartalmaztunk, amely segíthet.,d csak akkor használható, mint egy útmutató az induláshoz:
/* start of desktop styles */
@media screen és (max-width: 991px) {
/* start of large tablet styles */
}
@media screen and (max-width: 767px) {
/* start of medium tablet styles */
}
@media screen and (max-width: 479px) {
/* telefonstílusok kezdete */
}
legnépszerűbb Képernyőfelbontások
tudva, hogy kulcsfontosságú a sok különböző eszköz számára a webhelyek tervezésekor, összeállítottuk a legfrissebb eszközök listáját az alábbi képpontméretekkel és nézetablakokkal., Azt is fel ezt az információt egy praktikus letölthető PDF.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Ossza meg velünk a Facebook-on!