如何基于移动设备更改CSS? [英] How to change CSS based on mobile device?
本文介绍了如何基于移动设备更改CSS?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在下面的示例中,我只显示一个 div
,具体取决于设备。
In the following example, I want to display only one div
, depending on the device.
我熟悉如何使用 @media
覆盖CSS类,但不知道如何执行条件操作
I'm familiar with how to use @media
to override a CSS class but not how to do a conditional.
<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即可有条件地完成此操作:
Here's an example of how it can be done conditionally without 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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文