Diskuze: Nav menu
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Zobrazeno 6 zpráv z 6.
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
<nav>
<ul>
<li><a href="#">Domů</a></li>
<li><a href="#">Články</a></li>
<li><a href="#">Fotogalerie</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>nav ul{
margin: 0;
padding: 0;
}
nav ul li{
list-style-type: none;
display: inline-block;
padding: 10px 10px;
}
nav ul li a{
display: block;
}Takhle ti zůstane na jednom řádku, co nejvíce položek a ty, co se nevejdou se zalomí. Zmenšovat písmo podle velikosti displeje je nesmysl. Čím menší zařízení, tím větší by písmo a odkazy měli být větší kvůli čitelnosti a ovladatelnosti. Pokud by jsi to, ale vážně potřeboval, což já ti rozhodně nedoporučuji:
@media all and (min-width: 100px){
nav{
font-size: 5px;
}
}
@media all and (min-width: 400px){
nav{
font-size: 10px;
}
}A tak dále dokud nebude velikost písma normální. Přímo ty velikosti si uprav podle počtu položek v menu.
No jasně, takže tomu zalamování nezabráním jinak, než tím nastaveím velikosti písma pro každou velikost zvlášť...?
Popřípadě nastavení šířky nav ul li (width), ale to už si musíš vyladit podle počtu prvků.
To je veľmi nedynamické riešenie. Ak nechceš riešiť zalamovanie, nemal by si robiť responzívny web.
Čo sa týka zmeny veľkosti písma, je to určite nevhodné. To si rovno môžeš nahrať na server obrázok.
Chytrejšie je v závislosti na veľkosti písma upravovať ostatné prvky. 1em je nastavená veľkosť písma (font-size). V @media deklarácii ide túto jednotku použiť: @media (max-width: 30em).
Keďže hodnota jednotky em sa môže meniť a vo vnútri dokumentu môže nastať potreba použiť pôvodnú veľkosť písma (veľkosť nastavenú pre koreňový element), existuje jednotka rem.
Celé sa to hodí na to, aby sa web nerozpadol, keď si užívateľ na mobilnom zariadení manuálne zväčší písmo (ale písmo sa zväčšuje aj na stolových zariadeniach a keďže Explorer neumožňuje užívateľom v pixeloch nastavenú veľkosť písma zväčšiť, bolo by lepšie sa jej na tieto účely vyhnúť).
Neviem ako je to naprieč prehliadačmi, ale 1em by malo byť 16 (zväčšiteľných) pixelov.
Docela parádní je řešení s flexboxem, ale záleží na tvé požadované funkcionalitě. Flexbox ti dokáže přizpůsobovat položky v menu tak, aby se tam vždy vešly, ale při malé šířce se to bude buď zalamovat, nebo vytékat text.
Ale mohl bys také jednoduše např. změnit text položky za ikonku.
Zobrazeno 6 zpráv z 6.