népszerű Képernyőfelbontások: tervezés minden

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 360 x 640 Tablets Nexus 9 1536 x 2048 768 x 1024 Nexus 7 (2013) 1200 x 1920 600 x 960 Pixel C 1800 x 2560 900 x 1280 Samsung Galaxy Tab 10 800 x 1280 800 x 1280 Chromebook Pixel 2560 x 1700 1280 x 850

Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Ossza meg velünk a Facebook-on!

Leave a Comment