NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
Jan Václavík
Člen
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í
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
6.3.2019 15:41
Avatar
heydukfrantisek
Člen
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
Člen
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.