Autor Zpráva
zuzička
Profil
Dobrý den,
pokouším se o svůj první responsivní desig. Stuktura je jednoduchá, jen jeden sloupec. Ráda bych aby se na mobile zobrazoval jiný obrázek na pozadí stránek než na větších monitorech. Už několik dní na ten zápis koukám, nefunguje (na obou se zobrazuje pouze obrázek, který je v zápisu jako první) a já nemůžu najít chybu. Můžete někdo zkušenější prosím kouknout, jestli mi tam něco nechybí? Snažím se k tomu přistupovat MobileFirst.
Díky.

#vstup {
width: 100%;
min-height: 600px;
background: url('../img/kravka_mala.jpg') top center;
background-repeat: no-repeat;
background-size: 100%;
margin:0px;

@media (min-width: 420px)
{ 
background: url('../img/kravka_velka.jpg') top center;
min-height: 910px;
background-repeat: no-repeat;
background-size: 100%;
margin:0px;
}
}
Tomášeek
Profil
zuzička:
Nemáš definované medium, pro které ten breakpoint platí. A neptej se, prosím, jaká media jsou, to si najdi.
zuzička
Profil
Tomášeek:
... já původně začínala s definicí @media screen , ale to taky nefungovalo a když jsem viděla zápisy bez definice media, zkusila jsem to a taky to nefungovalo. Tak jsem si říkala, že probém bude jinde.
T-fon
Profil
V CSS takhle @media nemůžeš zanořit do elementu. To funguje třeba v SASS...
zuzička
Profil
Aha, mě to přišlo logický. Předělám to. Nicméně jsem opravu procházela web a našla jsem několik různých přístupů. Ráda bych se optala na vaše zkušenosti. Je lepší mít stylopis v několika souborech podle rozlišení a linkovat každý nebo v jednom a linkovat jenom jeden css soubor? Myslím pro nahrávání dat do mobilu, co je uspornější?
Už jsem to opravila a funguje .... díky za trpělivost ...
T-fon
Profil
Třeba tady jsou nějaké užitečné informace. Určitě toho najdeš na netu víc.
zuzička
Profil
Díky, já si dokonce předevčírem koupila i e-knihu (Vhuru do responsivního webdesignu) od autora toho článku ... ale je tam málo příkladů. Opravdu se snažím nejdřív hledat, ale někdy se zaseknu na nějaké blbosti a když na to za několik dní nepřijdu, tak se zeptám zkušenějších .... :-) Díky. Budu dál pátrat.
T-fon
Profil
Rozdělit css můžeš na víc souborů, ale ne podle media queries. To určitě neni správný přístup. Kdybys pak chtěla jakoukoliv vlastnost změnit, tak bys změnu musela udělat ve dvou souborech (navíc. v reálu nestyluješ jen pro mobil a pro desktop, takže spíš ve víc souborech).
zuzička
Profil
.. to si taky myslím, ale viděla jsem to např. tady www.zdrojak.cz/clanky/webdesigneruv-pruvodce-po-css3-media-queries tak jsem chtěla vědět, jeslti k tomu existuje nějaký dobrý důvod.
Mlocik97
Profil
zuzička:
máš tam 3 chyby... zaprvé @media vnorené v selectore,... @media musí byť vždy v "rootovskom scope" tzv. do ničoho zanorené. Naopak (za druhé) selector je vnorený do @media takže namiesto:

#id {
height: 20px;
@media (/*podmienka*/) {
height: 40px;
}
}

má byť správne

#id {
height: 20px;
}
@media (/*podmienka*/) {
#id {height: 20px;}
}

dodám že by bolo vhodné tam písať médium typ ako "only screen" (to je to zatretie).
zuzička
Profil
Mlocik97:
Děkuji, na něco jsem mezitím přišla, ale jiné problémy se vynořili. Only screen určitě doplním. Díky.
Tomáš123
Profil
Mlocik97:
dodám že by bolo vhodné tam písať médium typ ako "only screen"
Only je zrejme relevantné iba v prípade špecifikácie média v HTML.

zuzička:
Všeobecný zápis @media je tiež v poriadku ak vieš čo robíš. Štýly sa aplikujú aj na ostatné typy médií, čo môže byť vítané.

Čo sa šetrenia týka, treba nájsť kompromis medzi čistotou kódu a množstvom súborov. Veľký web v jednom CSS súbore môže spôsobovať problémy s orientáciou, veľké množstvo súborov je náročnejšie na načítanie. Ja si zvyknem rozdeľovať kód do dvoch súborov. Jeden pre bežný vzhľad, druhý pre responzivitu.

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:

0