简单的响应内容移动/桌面与媒体查询

Question

 /* Desktop */
 @media screen and (min-width:641px){ 
  .desktop{
  float: left;
  }
  .mobile{
  display: none;
  float: left;
  }
 }


 /* Mobile */
 @media screen and (max-width:641px){ 
  .desktop{
  display: none;
  float: left;
  }
  .mobile{
  float: left;
  }
 }

<div class="desktop">
    Show me on desktop
</div>
    
<div class="mobile">
    Show me on mobile
</div>

上面的简单代码会在我的网站上显示一些响应内容。

当我在桌面上运行代码时，我会看到两个div容器：

Show me on desktop
Show me on mobile

一旦我使用移动尺寸，我只会看到移动内容：

Show me on mobile

我想在桌面上实现这一目标，内容仅限于：

Show me on desktop

我需要在代码中更改哪些内容，以便桌面上只显示Show me on desktop部分？

Answer 1

您必须使用@media handheld and (max-width: 641px)的{​​{1}}时刻，因为移动设备上的css没有屏幕。 有关更多信息，请查看： https://www.w3schools.com/cssref/css3_pr_mediaquery.asp 希望它有所帮助。