W poniższym przykładzie chcę wyświetlić tylko jeden div
, w zależności od urządzenia.Jak zmienić CSS na podstawie urządzenia mobilnego?
Jestem zaznajomiony z tym, jak używać @media
do przesłonięcia klasy CSS, ale nie w jaki sposób wykonać warunkową.
<style type="text/css">
@media (max-width : 770px) {
...
}
@media (max-width : 320px) {
...
}
//do I need another for the desktop?
</style>
//if desktop
<div style="width: 400px; float: left;">
this is desktop
<a href="somepage.html"><img src="aLargeImage.png"/></a>
</div>
//if mobile
<div style="width: 200px; float: left;">
this is mobile
<a href="somepage.html">just text</a>
</div>
Wszelkie sugestie?
Jestem nieco zdezorientowany, ale chcesz tylko pokazać różne elementy div w zależności od rozmiaru ekranu, na którym użytkownik się znajduje? – Hoshts
Niezależnie od tego, czy zawartość jest ukryta, użytkownik nadal będzie ją pobierać. Wiele osób płaci dziś KB za swoje plany na urządzenia mobilne. – cimmanon
Nie za dużo. Wiele planów to nieograniczone dane. Ale nie tak naprawdę na około KB problem. Myślę, że ukrywanie/pokazanie tych dwóch elementów div jest rozwiązaniem. Potrzebuję tylko różnych nazw klas. – 4thSpace