Populární Rozlišení Obrazovky: Navrhování pro Všechny

V dnešním světě existuje nepřeberné množství zařízení pro lidi, aby si vybrat z, a to může být skličující, pokusit se ubytovat a vytvořit pro nejlepší zkušenosti na všech zařízeních. Při navrhování webových a mobilních webů je však důležité zůstat aktuální s nejoblíbenějšími velikostmi a rozlišeními obrazovky. Web, který je optimalizován a citlivý, umožňuje snadnější tok uživatelů a nakonec příjemný zážitek pro vaše publikum.,

velikost obrazovky, rozlišení a výřez: co to všechno znamená?

Když si koupíte zařízení, často uvidíte jak velikost obrazovky, tak rozlišení uvedené ve specifikacích. Screensize je fyzické měření diagonálně obrazovky v palcích. To se nesmí zaměňovat s rozlišením, což je počet pixelů na obrazovce, které se často zobrazují jako šířka podle výšky (tj. 1024×768). Protože zařízení se stejnou velikostí obrazovky mohou mít velmi odlišné rozlišení, vývojáři používají viewports při vytváření stránek přátelských k mobilním zařízením., Viewports jsou zmenšeny verze rozlišení, která umožňuje weby Zobrazit konzistentněji na různých zařízeních. Viewports jsou často standardizovanější a menší než velikosti rozlišení.

Zatímco desktop a notebook, zobrazí se v orientaci na šířku (širší než vysoký), mnoho mobilních zařízení lze otáčet zobrazit webové stránky v obou krajině a na výšku (vyšší než širší) orientace. To znamená, že návrháři a vývojáři musí navrhnout tyto rozdíly.

potřebujete pomoc při určování, zda vaše webové stránky reagují? Použijte náš bezplatný nástroj MG, citlivý Design Checker.,

Zatímco desktop a notebook, zobrazí se v orientaci na šířku (širší než vysoký), mnoho mobilních zařízení lze otáčet zobrazit webové stránky v obou krajině a na výšku (vyšší než širší) orientace. To znamená, že návrháři a vývojáři musí navrhnout tyto rozdíly.

responzivní Styling

pro podniky by bylo téměř nemožné navrhnout pro každé jednotlivé zařízení. Místo toho při programování responzivních návrhů vývojáři často:

  • seskupují styl do nejtypičtějších velikostí zařízení pro telefony, tablety a stolní počítače., V tomto případě, nic větší než 7 palců je obvykle zobrazí na ploše rozlišení nebo-
  • Používat zarážky (definovaný pixel šířky, které na displeji se přizpůsobit rozvržení založené na velikosti obrazovky) závislé na design a rozvržení

Někdy, vývojář může vybrat, aby kombinovat obě metody považují-li to za nutné. Doporučujeme začít seskupením typických velikostí zařízení dohromady.

Pokud jste vývojář a hledáte generovat potřebné styly zvládnout mobilní nebo responzivní design, níže uvádíme úryvek z CSS, které by mohlo pomoci.,d být použity pouze jako průvodce, jak začít:


/* start of desktop styles */

@media screen and (max-width: 991px) {
/* začátek velkých tablet styly */

}

@media screen and (max-width: 767px) {
/* začátek střední tablet styly */

}

@media screen and (max-width: 479px) {
/* začátek telefon styly */

}

nejoblíbenější Rozlišení Obrazovky

s Vědomím, že to je klíčové přizpůsobit pro mnoho různých zařízení, při navrhování webových stránek, jsme sestavili seznam nejvíce up-to-date zařízení s jejich pixelovou velikostí a výřezy níže., Tyto informace jsme také vložili do praktického PDF ke stažení.,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?, Podělte se s námi na Facebook!

Leave a Comment