Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 80% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu

Diskuze: Jak na responzivní design z PSD šablony 1920px

Aktivity (3)
Avatar
Jan Václavík:6.3.2019 14:54

Ahoj, kóduji šablonu webu z PSD podobné layoutu jako na na obrázku. Velikosti písma, obrázků, paddingy(jen přibližně) jsem z návrhu přepsal do css ale ten je dělaný v 1920px a já teď nevím jak dál postupovat abych docílil plně responzivního webu. Mohl by mi někdo prosím poradit jak udělat CSS webu tak aby vypadalo na 1200px nebo 800px stejně dobře jako na 1920px. Media Queries používám ale jde mi spíš o nějaký model poměru font-size a pod.

Děkuju

 
Odpovědět
6.3.2019 14:54
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6.3.2019 15:41

google = bootstrap css
google = bootstrap layout demo
To je kompletni desing vytvoreny pro ruzne pomery. Je to zalozene na 12 sloupcech. Pomoci class si pak nastavujes, pro 4 ruzne sirky obrazovky, kolik pouzijes sloupcu.

Napr
https://v4-alpha.getbootstrap.com/…s/offcanvas/
(zobrazit zdrojovy kod)
col-12 col-md-9 = vsechna zarizeni 12 sloupcu, md a vetsi jen 9 (cili od md velikosti bude sede Hello word zabirat 9 sloupcu. A kdyz budes zmensovat sirku pod md, tak se roztahne pres celou sirku obrazovky, 12 sloupcu)
https://getbootstrap.com/…layout/grid/
md = 576px - 768px

Nemusis BT pouzivat, muzes si stahnout ne-mini-fikovanou verzi a vykopirovat si jen tu cast css, ktera resi layouty. Pozor, je to tam asi 3x, neco definuje vnitrni .col na procenty. Musis zvazit, co z toho vyuzijes.

Jo, sirku 1900 to nezna, ale slo by to css doupravit. To snadno pochopis.

Editováno 6.3.2019 15:42
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět
6.3.2019 15:41
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
heydukfrantisek:13.3.2019 5:52

A nestačilo by jenom nastavit hlavnimu elementů nastavit šířku 100% a písmu nastavit relativní hodnoty em?

Editováno 13.3.2019 5:54
 
Nahoru Odpovědět
13.3.2019 5:52
Avatar
Jan Václavík:21.3.2019 22:23

Pro budoucí návštěvníky vlákna. Fontsize jsem to vyřešil takto --> https://css-tricks.com/…-typography/ a s layoutem jsem si pohrál s col viz: https://getbootstrap.com/…layout/grid/#… . Zúčastněným děkuji za pomoc

 
Nahoru Odpovědět
21.3.2019 22:23
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.