Ukrywanie elementów zależnie od rozdzielczości

Question

Witam,

 

W jaki sposób ukryć kilka elementów div, a pokazać tylko 1? (np. na desktopach widoczny div id="1", na tabletach div id="2", a na smartfonach div id="3")

Answer 1

@media only screen and (min-device-width: 600px) {
.div-ktory-na-urządzeniach-mobilnych-zamienia-się-z-żółtego-na-czerwony {
color:red;
}
}

@media only screen and (max-device-width: 600px) {
.div-ktory-na-urządzeniach-mobilnych-zamienia-się-z-żółtego-na-czerwony {
color:yellow;
}
}

to wszystko. żadnego JS-a

Answer 2

Jeśli zależnie od rozdzielczości (a dokładniej wielkości okna przeglądarki) to reguły @media w CSS - nie potrzeba do tego JavaScriptu. Dla wybranych wielkości możesz zdefiniować wybrane przez siebie właściwości CSS dla danego elementu.