Skip links
responsive

Ako vytvoriť responzívnu web stránku

V tomto článku si povieme ako upraviť web stránky pre mobilné zariadenia, teda ako ako vytvoriť responzívnu web stránku. Responzivita web stránok je v poslednej dobe veľmi dôležitá. Jednak preto lebo čoraz viac ľudí využíva pri surfovaní po internete mobil alebo tablet, ale aj kvôli vyhľadávači Google.

Google začalo v roku 2014 uprednostňovať vo vyhľadávaní web stránky, ktoré sú responzívne. Pokiaľ pri vyhľadávaní v google využijete mobilné zariadenie stránky, ktoré nie sú responzívne sa vo výsledkoch vyhľadávania vôbec nezobrazia.

Google neustále zlepšuje svoje algoritmi, a preto treba svoje stránky neustále zlepšovať. Pred nedávnom stačilo nastaviť v css kóde jednu šírku pre všetky rozlíšenia a web stránka bola automaticky vyhodnotená ako responzívna. Dnes si už však treba dávať pozor aj nato či je stránka upravená správne pre každé rozlíšenie.

Ako vytvoriť responzívnu web stránku

Pokiaľ chcete spraviť svoje webové stránky responzívne budete potrebovať aspoň akú takú znalosť CSS kódu. Pri zložitejších web stránkach je upráva responzivity náročný proces, pretože niektoré prvky sa musia upravovať pre každé rozlíšenie zvlášť.

Využíva sa k tomu príkaz media-query, pomocou ktorého nastavíte parametre daného prvku v určitom rozlíšení.

Príklad: obrázok (div.moj-obrazok), ktorý mám na webe sa v mobile zobrazuje príliš veľký. Najprv musím pomocou media-query zadať rozlíšenie daného zariadenia v ktorom sa má logo zobrazovať. Väčšina mobilov ma maximálnu šírku 320 px, takže maximálnu šírku nastavím na túto hodnotu. Takže dané nastavenie medzi { a } bude platiť len pre rozlíšenie od 0 do 320 px.

@media (max-width: 320px) { … }

Teraz potrebujem nastaviť veľkosť daného obrázka pre mobil. Takže medzi zložené zátvorky { … } zadám id daného prvku, v mojim prípade div.moj-obrazok a potom jeho parametre tiež medzi znaky zložené zátvorky { }.

@media (max-width: 320px) { div.moj-obrazok { width:150px; } }

Takto sa pokračuje so všetkými prvkami, ktoré treba upraviť pre mobil. Všetky prvky sa vkladajú medzi nadradené zložené zátvorky.

Príklad:

@media (max-width: 320px) {

div.moj-obrazok { width:150px; }

div.text { width:300px;  margin:auto}

img.logo { width:100px;  float:left}

}

Nadradené zátvorky si treba oddeliť, od prvkov v nich vložených. Pri dlhom kóde by sa vám mohli ľahko stratiť.

V ďalšom návode si ukážeme ako upraviť stránku pre ostatné zariadenia a ako si uľahčiť úpravu responzivity už pri tvorbe webu.

5/5 - (celkom: 1 )

Zanechajte komentár

Zobraziť
Potiahni