如何隐藏（禁用）从桌面到移动 CSS 转换的任何内容答案

【问题标题】：How to hide(disable) anything from desktop to mobile css transition如何隐藏（禁用）从桌面到移动 CSS 转换的任何内容
【发布时间】：2016-05-30 19:17:07
【问题描述】：

我想使用@media 将一些块元素从桌面版“隐藏”到移动版，这样“隐藏”的元素就不会吃掉流量。

这个“块元素”显然会包含很多数据，包括图像、内嵌块元素、块元素等。所有这些都不应该在移动版本中下载。好吧，我想知道是否可以使用@media 规则来实现这一点。据我所知，display: none 并没有解决这个问题，但也许我错了。

附：代码示例：

<div class="desktop">
 ...
 <div ... > ... </div>
 <span ... > ... </span>
 ...
</div>
<div class="mobile">
 ...
 <div ... > ... </div>
 <span ... > ... </span>
 ...
</div>

@media (max-width:799px){
  .desktop { display: none; }
}
@media (min-width:800px){
  .mobile { display: none; }
}

【问题讨论】：

我可以看到您要隐藏的代码，包括带有问题代码的 jsFiddle 链接吗？
感谢您无缘无故地投反对票 :)
Nathan L，它可以是任何东西。但我不介意举个例子，当然
你有没有在你的html类的头部添加？如果不检查这个帖子：stackoverflow.com/questions/7859336/…
我确实做到了。这与@media 不工作无关，它工作得很好。这是关于用它隐藏一些元素，所以它不会占用带宽

标签： css mobile responsive-design media-queries

【解决方案1】：

即使使用 display:none 也会加载元素（它们已加载但未显示），您可以使用 JQuery 生成网站的某些部分：

$( document ).ready(function() {
  if (window.matchMedia('(max-width: 767px)').matches) {
        $("#mobile" ).html("mobile!");
    } else {
         $("#desktop" ).html("desktop!");
    }
 });

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width" />
</head>

<div id="mobile"></div>
<div id="desktop"></div>

在移动设备上，HTML 代码如下所示：

<div id="mobile">Mobile!</div>
<div id="desktop"></div>

像这样在桌面上：

<div id="mobile"></div>
<div id="desktop">Desktop</div>

不知道有没有更好的解决办法，希望我的回答对你有帮助。

【讨论】：