/ / Zapytania o media i obrazy tła - css, zapytania o media

Zapytania o media i obrazy tła - css, zapytania o media

Mam div

<div id="page">

</div>

Z następującymi css:

   #page {
background: url("images/white-zigzag.png") repeat-x;
}

@media (max-width: 600px) {
#page {
background: url("images/white-zigzag-mobile.png") repeat-x;
}
}

Zauważyłem, że gdy zmieniam rozmiar przeglądarki, widzę tło "mobilne" (dobre), ale jeśli wrócę i zwiększę moją przeglądarkę, moje poprzednie "duże" tło nie zawsze pojawi się ponownie.

Jest to sporadyczny problem, ale dzieje się tak często, że uważam, że powinienem się zająć.

Czy istnieje sposób na obejście tego "tłaobraz nie pojawia się "problem lub sposób zmiany rozmiaru obrazów tła, tak, że zapytanie mediów" zmniejsza "obraz tła do nowego rozmiaru? O ile mi wiadomo, nie ma (rozpowszechniony) sposób, aby zmienić rozmiar obrazu tła ...

Odpowiedzi:

20 dla odpowiedzi nr 1

Według ten test:

Jeśli chcesz tylko wersję obrazu do pobrania na komputer stacjonarny ...

i tylko obraz mobilny do pobrania na urządzenie mobilne -

Musisz użyć a min-width deklaracja określająca minimalną szerokość przeglądarki dla obrazu pulpitu ...

i za max-width dla obrazu mobilnego.

Twój kod będzie więc:

@media (min-width: 601px) {
#page {
background: url("images/white-zigzag.png") repeat-x;
}
}

@media (max-width: 600px) {
#page {
background: url("images/white-zigzag-mobile.png") repeat-x;
}
}

1 dla odpowiedzi nr 2

Podany kod jest małym buggy, który jest prawdopodobnie dobrym miejscem do rozpoczęcia, jakie masz obecnie

#page {
background: url("images/white-zigzag.png") repeat-x;
}

@media (max-width: 600px) {
background: url("images/white-zigzag-mobile.png") repeat-x;
}

Część z zapytaniem o media nie jest kompletna. Nadal musisz podać selektor CSS, który był używany poza zapytaniem:

#page {
background: url("images/white-zigzag.png") repeat-x;
}

@media (max-width: 600px) {
#page {
background: url("images/white-zigzag-mobile.png") repeat-x;
}
}

Zacznij od tego i daj mi znać, jeśli to naprawi.


0 dla odpowiedzi № 3

proszę użyć

`@media screen and (min-width: 320px) and (max-width:580px) {
#page{
background: url("images/white-zigzag.png") repeat-x;}}`