spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Michal Chovanec 26.2.2012
Hodnoť článok:
1 0

Prispôsobme layout šírke prehliadača

Ako pomocou CSS3 reagovať na šírku prehliadača

Pomocou CSS konštrukcie @media si môžeme prispôsobovať štýly rôznym okolnostiam. A medzi nimi je aj šírka zobrazovacej plochy prehliadača.

Takže napríklad ak použijeme vlastnosť padding s hodnotou napr. 100px tak pri užšom zobrazení to nemusí byť vhodné. A tu sa ponúka riešenie.

Takže k pôvodnému nastaveniu:

#container {
    padding: 100px;
}

Môžeme pridať toto:

@media (max-width: 500px) {
    #container {
        padding: 50px;
    }
}

Toto nastavenie nám zmení hodnotu padding na 50px v prípade že šírka zobrazovacej plochy prehliadača bude 500 pixelov alebo menšia. Prehadzuje sa to aj dynamicky.

Samozrejme môžete pridávať aj ďalšie nastavenie @media pre menšie či väčšie veľkosti.

Tiež existujú aj ďalšie možnosti ako napríklad: rozlíšenie, 3d zobrazenie, pomer strán, farebná hĺbka... Celý prehľad nájdete tu: W3C Media Queries

Veľmi efektívne túto vlastnosť CSS využívajú weby Codrops a CSS-Tricks.
Príklad môjho použitia nájdete tu.

Hodnoť článok:
1 0

15 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

1 0 Andrej Badin 3.3.2012 20:46:55
Vyjadrovanie autora... 0 bodov :)
0 0 František "yderf" Haško 29.2.2012 00:53:50
@Viktor: hmm, moja chyba v nepochopeni. Ohladne anglickych slovicok, toto je zbytocna diskusia, kazdy ma svoj sposob, len neblbnut proti druhym. Ako som vravel, ak sa to prehana, tak mas potom v Photoshope obrazove body namiesto px a vyzera to dementne. Responsivness ani neviem, akoby som prelozil, jednym slovom by to asi nebolo :-)
0 0 viťo 28.2.2012 09:46:15
mal som na mysli pouzivanie anglickych slovicok..
0 0 Peter Širka 27.2.2012 23:51:33
@Viktor Čech: +1
0 0 František "yderf" Haško 27.2.2012 22:56:21
Neviem o com tocis Viktor, responsive design je najaktualnejsi trend navrhu stranok. Vznikol ako reakcia na to, ze je kopa smartfonov, tabletov a pod. s roznymi mensimi rozliseniami (pricom stare pre velke monitory su tu nadalej), takze upravuje sposob zobrazovania stranky v zavislosti na nom (a teda tazko mohol ficat v 2003, kedze era tychto zariadeni zacala tak max. 2-3 roky dozadu a stale trva).

Urob nabuduce nejaky vyskum Googlom, kym hodis do sveta podobny "splech".
0 0 Ivan Minárik 27.2.2012 22:52:42
@Viktor okej, už som to tam zbadal. Len som čakal, že celá stránka sa prispôsobí zmene okna, prvky sa preskupia, niektoré skryjú... No offence meant.
V tomto prípade nejde o to byť za každú cenu moderný, ale brať do úvahy, že na trhu sú rôzne zariadenia schopné rôzne zobraziť danú stránku. S prispôsobivým (=? responsive) webom nemusíš kódiť 3 varianty webu (resp. nie úplne).
0 0 viťo 27.2.2012 22:33:39
ono byt za kazdu cenu moderny je v dnesnej dobe smiesne.. to frcalo v 2003 roku taketo veci :)
0 0 František "yderf" Haško 27.2.2012 17:05:30
ja nie som na slovensku a tiez nevidim problem v chapani anglickych terminov. Ci ty si zastanca "obrazovych bodov", lol?
0 0 viťo 27.2.2012 15:10:59
@franto piseme po slovensky, sme na slovensku a na slovenskej stranke predsa.. ci nevies ako to slovko po slovensky napisat.. hejze. ide len o to.
0 0 František "yderf" Haško 27.2.2012 12:55:23
@Viktor: responsive design - http://designmodo.com/responsive-design-examples/ trosku sledujeme odbor, v ktorom robime predsa...

ide o to, ze nie len na zaciatku, ked sa pusti stranka sa pozrieme na rozlisenie, ale cely cas. Podla toho sa meni zobrazenie stranky.
0 0 Tomáš Stankovič 27.2.2012 12:48:18
snáď ale vieš čo tým slovom myslel nie? :) a aby som nebol uplne OT. super alternatíva tu raz bola popisovaná : http://www.zajtra.sk/programovanie/327/adaptivny-web-wtf
Riešenie za pomoci javaScriptu a niekoľkých špeciálnych štýlov pre rôzne rozlíšenia
0 0 viťo 27.2.2012 10:53:28
@ivan si nastav 800x600 a pozri stred.. si potom nastav vacsie rozlisenie a pozri stred.. netusim, co je responsiveness a uz vobec netusim, preco si to slovo napisal..
0 0 Ivan Minárik 26.2.2012 23:42:06
@Viktor Čech: Hmm, azet som cvične vyskúšal a nevidím žiadnu "responsiveness"...
@autor: Ďakujem za veľmi dobrý tip. Tiež by som ale uvítal popis obmedzení...
0 0 viťo 26.2.2012 22:29:41
toto som pouzil aj na webe azet.sk
0 0 Martin Maričák 26.2.2012 21:23:29
No hej, responsive je teraz trend, mohol si aspoň zmieniť ako je to s podporou prehliadačov, že sa to dá dodatočne riešiť javascriptom a pod.
Zajtra.sk > Programovanie > CSS/HTML > Prispôsobme layout šírke prehliadača


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama