Autor Zpráva
Annie
Profil
...mám v tomhle tématu asi milion otázek, takže pokud by tu byl někdo ochotný a znalý, kdo by o tom mohl dát řeč, budu velmi ráda.. :) Pokud ne, tak minimálně potřebuju pomoct s otázkou co se týče videí(tabulek, větších obrázků,...) - jakým stylem zadám to, aby se mi, např. na mobilu, nejenom přeskupily pod sebe (snažím se pomocí bootstrapu), ale hlavně aby se mi již zmíněné věci zmenšily...
Str4wberry
Profil
Odpovědi na všechny uvedené problémy byste mohla najít v článku: Responsivní design webu

Co s tabulkami, obrázky a videem se konkrétně věnuje pasáž: Responsivní design webu » HTML výjimky
jefitto44
Profil
Hlavné je pochopiť základ... a o tom sa dočítaš trebárs tu: http://brm.sk/485/ako-na-responsive-design

Čo sa týka tabuliek, obrázkov a videi, tak platí, že ak im zadáš nejakú width, tak výška sa automaticky prispôsobí. Osobne používam na všetky tieto srandy display:block;, samozrejme netvrdím, že je to vždy najlepšie riešenie, ale potom sa obrázok správa ako div a dá sa s ním pohybovať, dá sa marginovať atď atď...

Takže treba len skúšať a skúšať... Osobne mi bootstrap nikdy moc nešiel, napriek tomu si myslím, že svojou cestou dokážem vyprodukovať aj tak stále dosť dobré responsivy
Annie
Profil
Abych se přiznala, tak to čtu, ale pořád to moc nechápu :( resp. vždycky když si myslím, že jsem to pochopila, tak to zkusím a je to zase špatně... obávám se, že většina je způsobená marginem/paddingem.. a tím, že mám pevně nastavený šířky objektů - jenže když tyhle věci nebudu mít, tak to bude špatně vypadat na větších obrazovkách..
Str4wberry
Profil
Můžete to řešit uváděním rozměrů marginů/paddingů v procentech, takže se přizpůsobí velikosti stránky a snadno tuto hodnotu odečtete od max-width.

Ukázka

Případně pro různé šířky obrazovek použít různé styly: Responsivní design webu » Media queries
jefitto44
Profil
Nechecš dať rovno odkaz na tvoju stranku?
Box-sizing ti hodne pomôže, vyrieši problemy s prečnievajucimi divkami kvôli paddingom a borderom... A nič ti nebráni cez media queries nastaviť percentá len pre malé displaye
Tomáš123
Profil
jefitto44:
Box-sizing
Box-sizing nefunguje vo všetkých prehliadačoch rovnako, lepšie je používať dvojité obaľovanie:
<div class="obal"> <!-- tomuto divu určíme rozmery -->
  <div class="obsah"> <!-- a tomuto odsadenie -->
    <p>Výplň divu</p>
    <img src="nejaky-obrazok.jpg">
  </div>
</div>

Uvedené riešenie by malo byť spoľahlivejšie ako box-sizing.
Str4wberry
Profil
Box-sizing funguje od Internet Exploreru 8, to, myslím, u většiny webů stačí.

Jinak box-sizing sice řeší padding a border, margin ale už ne.
jefitto44
Profil
Kto na mobile používa IE 8 a menej? Box sizing si nastaví len pre mobily a tablety a tie to poznajú

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: