| Autor | Zpráva | ||
|---|---|---|---|
| zuzička Profil |
#1 · Zasláno: 14. 9. 2018, 19:09:52
Nepracuje mi správně nastavení breakpointu.
Chci pro rozlišení více než 900 px jeden obrázek, pro rozlišení od 767 do 900px druhý a pro menší než 767 třetí obrázek na pozadi. Metodou mobile first nastavím pozadí nejdříve pro nejmenší rozlišení a pak pomocí @media queries chci nastavit druhé dvě varianty. Varianta kdy je nastavena jen jedna mezní hodnota (min-width:901px) mi funguje, ale varianta, kdy nastavuji rozmezí @media screen and (min-width:767px) and (max-width:900px) mi nefunguje. Zobrazuje mi pozadí podle podmínky první nastavené @media queries (min-width:901px). Když zkusím zrušit u druhé podmínky max mezní hodnotu 900, načítá se mi (zcela logicky správně) pro všechny rozlišení nad 767 (tedy včetně těch nad 900 a výše i když tam zůstala podmínka jiného obrázku pro min 900px šířky) pozadí pro rozlíšení 767. Různá rozlišení si testuji zde : www.infobyip.com/testwebsiteresolution.php Nějaké rady co ještě zkusit? Děkuji za každý podnět. #vstup {
background: url('../img/kravka_mala.jpg') top center;
position: relative;
height:100%;
background-repeat: no-repeat;
background-size:auto 100%;
background-color: #808080ff;
background-attachment:fixed;
margin:0px;
padding:0px;
overflow: hidden;
width:auto;
}
@media screen and (min-width: 767px) and (max-width:901px) {
#vstup{
background: url('../img/kravka_velka_900.jpg') top center;
position: relative;
height:100%;
background-repeat: no-repeat;
background-size:auto 100%;
background-color: #808080ff;
background-attachment:fixed;
margin:0px;
padding:0px;
overflow: hidden;
width:auto;
}
}
@media screen and (min-width: 901px) {
#vstup{
background: url('../img/kravka_velka.jpg') top center;
position: relative;
height:100%;
background-repeat: no-repeat;
background-size:auto 100%;
background-color: #808080ff;
background-attachment:fixed;
margin:0px;
padding:0px;
overflow: hidden;
width:auto;
}
} |
||
| Joker Profil |
#2 · Zasláno: 15. 9. 2018, 08:52:54
Mně ten kód funguje podle očekávání, ukázka (pro ilustraci je stylopis nahrazený jen změnou barvy pozadí).
Problém bude někde jinde. Jinak různá rozlišení jde testovat i přímo v prohlížeči, většina prohlížečů má v rámci vývojářských nástrojů položku pro responzivní design, kde jde pohodlně zobrazit stránka ve zvoleném rozlišení. |
||
| zuzička Profil |
#3 · Zasláno: 15. 9. 2018, 09:55:22
Joker:
já v té ukázce vidím pořád červené pozadí i když přepínám ... je správně, že jsou tam 3 varianty - 960x445 a 1920x454 a 1280x883 ? u všech je šířka vyšší než 900 a tak vidím červnené pozadí ... něco dělám špatně ..... a taky jsem vyzkoušela responsivní náhled v prohlížeči a rozlišení, která byla problematická při testování v odkazu, co jsem posílala vydají tady v pohodě i s původním obrázkem (nový se stále nenačítá), takže by tento breakpoint nebyl vůbec zapotřebí. Jsem z toho trochu zmatená. Na co se můžu spolehnout a co vše je nutné testovat .... Jaké máte zkušenosti vy? Díky. Zuzka |
||
| T-fon Profil |
#4 · Zasláno: 15. 9. 2018, 11:18:48
Stačí když si budeš zmenšovat okno prohlížeče a hned uvidíš, jak ti přeskakujou barvy nebo obrázek.
Nebo třeba ve Firefoxu zmačkni CTRL+SHIFT+M a můžeš si libovolně obraz roztahovat + vidíš i rozměry. |
||
| Tomáš123 Profil |
#5 · Zasláno: 15. 9. 2018, 12:48:46
zuzička:
Vďaka princípu kaskádovania nepotrebuješ pre každé @media pravidlo písať všetky pôvodné vlastnosti prvku #vstup. Stačí ti prepísať iba tie deklarácie, ktoré sa zmenili. V tvojom prípade teda jedine background-image.
Dôvodom nefunkčnosti môže byť zápis farby pozadia ôsmimi znakmi (bežne farba nie je priehľadná, takže tie dve fka môžeš pokojne odstrániť). Možno je tiež chyba niekde inde v kóde, tak prilož živú ukážku, kde vieme problém pozorovať a prípadne uveď aj prehliadač a jeho verziu.
Neskôr uvedené pravidlo prebíja predchádzajúce s rovnakou váhou, preto vlastne hornú hranicu rozsahu nepotrebuješ. |
||
|
Časová prodleva: 3 dny
|
|||
| zuzička Profil |
T-fon:
Děkuji za tipy, to je užitečné vědět ... :-) Tomáš123: Myslela jsem si, že stačí deklarovat rozdílné vlastnosti (v tomtop případě vlastně jen obrázek), ale když jsem to zkoušela nepracovalo to dobře. Ted když vím, že to fungovat má, budu hledat chybu v kodu. Děkuji. Zápis barvy zkusím změnit. Dám vědět, jak jsem dopadla :-) Moc děkuji za tipy a informace. Zuzka |
||
|
Časová prodleva: 6 let
|
|||
0