Zestaw ikon zależny od rozdzielczości

Question

W pliku stylów można w zmienić wielkość wyświetlanych fontów, elementów dla ekranów o niższych rozdzielczościach w pisując te style w @media only screen and (max-width: XXXpx).

A jak zrobić, żeby dla niższej rozdzielczości podmienić ikonki „nawigacyjne” strony na te o większych rozmiarach? (lub te same przeskalować?).

Comments

Co masz na myśli pisząc "ikonki nawigacyjne"?
Jeśli standardowe ikony (fontawesome, fontello), to wystarczy zmienić wielkość czcionki w zależności od szerokości ekranu, tak jak zwykły tekst

@media only screen and (max-width: 400px).
{
.fa-arrow-left
{
font-size:100px;
}
}

 

---

Nie fonty, .png. dlatego nawigacyjne napisałem w „”, bo to nie tylko strzałki.

Answer 1

Skoro to są zdjęcia, to tak samo jak zdjęcia się zmienia.
Tutaj masz automatyczne skalowanie, oraz sztywne, przy danej szerokości ekranu.

.icon
{ 
width: 100%; 
height: auto; 
}

@media only screen and (max-width: 400px).
{
.icon
{
width: 100px;
height: 100px;
}
}