在下面的示例中,我只想显示一个 div
,具体取决于设备。
我熟悉如何使用 @media
覆盖 CSS 类,但不熟悉如何执行条件。
<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>
有什么建议吗?
最佳答案
这是一个如何在没有 javascript 的情况下有条件地完成的示例:
//CSS
.visibledevice {display:none;}
.visibledesktop {display:display;}
@media (max-width : 320px) {
.visibledevice {display:block;}
.visibledesktop {display:none;}
}
//in the page
<div class="visibledesktop">this displays for desktop and tablet</div>
<div class="visibledevice">this displays for mobile</div>
关于css - 如何更改基于移动设备的 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16156225/