| Autor | Zpráva | ||
|---|---|---|---|
| Trupik Profil * |
#1 · Zasláno: 3. 3. 2020, 18:56:23
Ahoj vespolek,
před lety jsem se hobby věnoval tvorbě webovek, ale posledních pár let jsem se tomu vůbec nevěnoval. Teď jsem po letech dělal jeden jednoduchý malý web (do 10stránek) jednomu místnímu sportovnímu spolku. Nebudu tvrdit že je to kdoví jak dokonalé, ale snažil jsem se abych odvedl kvalitní dílko. K dotazu: chtěl jsem zároveň vytvořit moderní responzivní design, ale vůbec jsem nepochopil jak na to. Všude na webu se zjednodušeně říká, že se rozložení a velikost prvků v CSS závisí na rozlišení a všude jsou ukázky že když zmenším okno, tak se mi layout přerovná na mobilní zobrazení. Jenže třeba můj počítač má klasické fullHD rozlišení 1920x1080, ale můj telefon má 2560x1440, telefon přítelkyně má 2520x1080, můj letitý tablet má 1920x1200,... takže jak poznat, že zařízení je telefon/tablet, když většina dnešních zařízení má na malé úhlopříčce výrazně lepší rozlišení než běžný stolní PC na 24"?!? Omlouvám se za blbou otázku, ale tohle opravdu nechápu :( Díky za vysvětlení, T. |
||
| Tomášeek Profil |
#2 · Zasláno: 3. 3. 2020, 19:42:31
Trupik:
Neřeš zařízení, to ti muže být jedno. Telefon s rozlišením 500px zobrazí totéž, co desktop s oknem prohlížeče šíře 500px. Udělej stránku pro fullhd a pak si zmenšuj okno prohlížeče. Když se ti prvky vedle sebe nevejdou, uděláš breakpoint v css a dodefinujes jiná pravidla. Pořad dokola až do nějakých 320px. Druhy přístup je opačný, mobile first. Jinak ten telefon (obecně retina displeje) má reálně pro responsive design rozlišení násobně (2-4x) nižší, než je reálné rozlišení přístroje. Návodu je spousta, stejně tak si můžeš na nejake stránce otevřít developerské nástroje, otevřít si css a koukat, co se děje. |
||
| Trupik Profil * |
#3 · Zasláno: 3. 3. 2020, 21:11:27
Tak teď nevím, jestli jsme se pochopili, nebo jo :)
Chápu, že nebudu řešit styl pro iPhone, styl pro Nokii, styl pro Samsung,... Spíš mi jde o tohle: mám telefon s cca 7" úhlopříčkou a rozlišením 2K. Vedle mám počítač s 27" monitorem a také rozlišením 2K. Na obojí se můj web krásně vejde, ale na mobilu je text a tlačítka nepoužitelně mrňavý. Jak tohle rozliším tak, abych na 2K telefonu měl 2x větší písmo a tlačítka než na monitoru se stejným rozlišením...?!? Pokud použiji @media only screen and (min-device-width: XXXpx) {
...
}Nebo mám tak dlouhé vedení, že mi něco nedochází? |
||
| Davex Profil |
#4 · Zasláno: 3. 3. 2020, 21:31:24
Trupik:
„mám telefon s cca 7" úhlopříčkou a rozlišením 2K. Vedle mám počítač s 27" monitorem a také rozlišením 2K“ V těchto dvou případech ale nebude velikost px stejná. Na mobilu může 1px odpovídat až 16 (4 * 4) fyzickým pixelům na displeji. |
||
| Keeehi Profil |
#5 · Zasláno: 4. 3. 2020, 03:31:04
Trupik:
Můj mobil má například FullHD rozlišení. Ovšem také má DPR s hodnotou tři (Device pixel ratio). To znamená, že v jednom směru tři fyzické pixely o sobě dohromady tvrdí, že jsou jeden. 1080 tedy musím vydělit 3 a získám tedy 360 obrazových pixelů. A to je hodnota, s kterou pak pracuje css. Tedy do doby než v prohlížeči vynutím zobrazení pro desktop. Pak jeden fyzický pixel odpovídá jednomu obrazovému pixelu. Všechno bude malinké, ale sám jsem si to zapnul, takže se není čemu divit. |
||
| Trupik Profil * |
#6 · Zasláno: 4. 3. 2020, 09:18:41
Aha... Takhle to je. Takže mobilní displej má třeba reálně FHD rozlišení, ale pro stránku se tváří jako výrazně menší,... Tak už to chápu :D
Díky za objasnění... |
||
|
Časová prodleva: 4 roky
|
|||
0