Úprava CSS pro responsivní design

1. 11. 2016 15:35:00

Ahoj, chci se zkušených designerů, jak se chová css v případě responsivního designu. Když chci mít například různě široký okraj při zobrazení na různých zařízeních, tak jak to nadefinuju? Je potreba mít například různé CSS třídy pro mobily? Díky

1. 11. 2016 15:35:00

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234379

Roman Macháč

(5 hodnocení)

1. 11. 2016 15:54:01

CSS3 @media Rule

1. 11. 2016 15:54:01

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234378

David Musil

(68 hodnocení)

1. 11. 2016 17:19:57

Jsou to tzv. media queries. Na zaklade minimalni/maximalni sirky zarizeni (ci kombinaci obou) definujes pozadovane vlastnosti.

Ja to treba pochopil z tohoto zdroje: http://www.vzhurudolu.cz/prirucka/css3-media-queries

1. 11. 2016 17:19:57

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234377

vpixle

(3 hodnocení)

3. 11. 2016 08:26:22

Mediaqueries jsou už dnes trochu za zenitem, jestli to nechceš napřesrok předělává napiš to rovnou jako flexbox. Jestli s responsivni webem úplně začínáš může to pro tebe být i jednodušší. Funguje to už všude. Používám to i uvnitř Phonegap-u takže na mobilech taky.

3. 11. 2016 08:26:22

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234376

Dominik Hašek

(12 hodnocení)

3. 11. 2016 10:02:29

vpixle: co to plácáš? Flexbox a Media Queries jsou 2 úplně rozdílně věci.

3. 11. 2016 10:02:29

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234375

vpixle

(3 hodnocení)

4. 11. 2016 01:48:56

Napsal Toliceek;1336274
vpixle: co to plácáš? Flexbox a Media Queries jsou 2 úplně rozdílně věci.

Ja to vim, proto rikam ze bych cely klasicky MQ pristup (ie.Bootstrap<4) preskocil. Jestli s responsiv webem teprve zacina mel by zacit na zelene louce s Flexboxem a potom mozna na dvou mistech pouzit MQ (ale temi bych uz menil FB property ie flex-direction, flex-wrap)

4. 11. 2016 01:48:56

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234374

Ondrej Vertat

(48 hodnocení)

6. 11. 2016 22:13:58

Napsal vpixle;1336520
Ja to vim, proto rikam ze bych cely klasicky MQ pristup (ie.Bootstrap<4) preskocil. Jestli s responsiv webem teprve zacina mel by zacit na zelene louce s Flexboxem a potom mozna na dvou mistech pouzit MQ (ale temi bych uz menil FB property ie flex-direction, flex-wrap)

Nevíš. Radíš nesmysly.

6. 11. 2016 22:13:58

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234373

Smazaný účet KvotlhHqXE

(39 hodnocení)

6. 11. 2016 22:28:25

Suhlas s prispevkom vyssie

6. 11. 2016 22:28:25

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234372

vpixle

(3 hodnocení)

14. 11. 2016 12:32:35

Jasne kluci, hlavne nepanikarit. Za okny je porad rok 2010 a nejdulezitejsi je kvuli responzibilite nahroutit nekolik stovek radku nejruznejsich hacku kde urcite nebudou zadne chyby a bude se to skvele udrzovat. Co by se asi mohlo pokazit ;)

flexbox in 5 minutes

14. 11. 2016 12:32:35

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234371

Dominik Hašek

(12 hodnocení)

14. 11. 2016 13:40:18

Víš vůbec co to jsou Media Queries ?

14. 11. 2016 13:40:18

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234370

vpixle

(3 hodnocení)

14. 11. 2016 15:07:38

Napsal Toliceek;1338917
Víš vůbec co to jsou Media Queries ?

Ano ja vim co jsou to MQ, ale taky vim ze skoro v roce 2017 nemam pomoci MQ primarne menit pozicovani a vlatnosti boxmodelu, ale (vyssi) vlatnosti flexboxu (order, wrap, nowrap, space-between, space-around, stretch) protoze tim usetrim 90% kodu (a chyb) a nebudu to muset za tri roky predelavat. Ale treba se vsichni krome Webtrhu myli a zbytecne vsechny nove CSS frameworky horecne pisou ve flexboxu.

Flexbox · Bootstrap

In a nutshell, flexbox provides simpler and more flexible layout options in CSS. More specifically, it provides:

Easy vertical alignment of content within a parent element.
Easy reordering of content across devices and screen resolutions with the help of media queries.
Easy CSS-only equal height columns for your grid-based layouts.

All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right.

14. 11. 2016 15:07:38

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234369

Ondrej Vertat

(48 hodnocení)

20. 11. 2016 17:29:46

Vpixle, vpixle ... já už jen doufám, že weby opravdu kóduješ, protože díky lidem jako ty mám pak plno práce, když zákazníci hledají někoho, kdo své práci rozumí.

20. 11. 2016 17:29:46

https://webtrh.cz/diskuse/uprava-css-pro-responsivni-design/#reply1234368

Pro odpověď se přihlašte.

Přihlásit