如何根据移动设备更改 CSS? [英] How to change CSS based on mobile device?

问题描述

In the following example, I want to display only one div, depending on the device.

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>

Any suggestions?

解决方案

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屋！