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
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Podělte se s námi na Facebook!