css - 如何防止加载html结构？

Question

我有 3 列:左中右，当@media 屏幕最大宽度小于 768px 时，我想放弃加载左侧。

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

我不想使用 display:none 来隐藏该列，而是阻止它加载，因此它不必运行可能会减慢速度的服务器代码。

做到这一点的最佳优雅方式是什么？

Answer 1

CSS 无法阻止常规 HTML 内容的加载，并且服务器无法知道媒体查询是否匹配。

您可以使用 JavaScript (window.matchMedia("only screen and (min-width: 480px)"))) 获取匹配的媒体查询，然后从服务器加载您想要的内容 (使用 AJAX，或导航到一个 URL，例如，附加 ?screen-width=1024)。

它不优雅，它非常丑陋而且根本不是动态的(除非你在每次页面加载时检查它并且如果查询字符串与匹配此 session 的媒体查询不匹配，你更改查询字符串并重新加载页)，但它应该可以工作。