我有 3 列：左中右，当@media 屏幕最大宽度小于 768 像素时，我想放弃加载左侧。
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
我不想使用 display:none 来隐藏列而是阻止它加载，因此它不必运行可能会减慢速度的服务器代码。
最好的优雅方式是什么？
【问题讨论】：
我想这个问题已经有了答案。有多种方法可以防止这些元素隐藏。但我认为没有办法阻止它加载。对于替代方案，您可以访问以下问题：
stackoverflow.com/questions/15855826/…您必须了解浏览器将下载整个 html 文件，构建网站，然后检查样式化 css 的 css 代码。您将无法为浏览器提供使用 css 加载内容的功能。
标签： css asp.net-mvc responsive-design
CSS 无法阻止加载常规 HTML 内容，服务器无法知道媒体查询是否匹配。
您可以使用 JavaScript (window.matchMedia("only screen and (min-width: 480px)")) 获取匹配的媒体查询，然后从服务器加载您想要的内容（使用 AJAX，或者通过导航到 URL，例如附加 ?screen-width=1024给它）。
它并不优雅，它非常丑陋而且根本不是动态的（除非您在每次页面加载时都检查这个，并且如果查询字符串与匹配此会话的媒体查询不匹配，您更改查询字符串并重新加载页），但它应该可以工作。
【讨论】：
您无法从服务器检测客户端的页面宽度。
如果您希望服务器到 div，那么您首先需要调用一个页面来捕获屏幕宽度，然后在对您的页面的请求中将其传递给服务器：
示例 javascript（使用 JQuery）：
window.location.href = 'www.site.com/mypage.php?page_width=' + $(window).width();
这可以通过$_GET['page_width']在php中访问
或者，您可以在 JavaScript 中完成所有操作，这将是一种很好的动态处理方式，同时还会考虑在页面使用期间调整浏览器窗口的大小。
我强烈推荐使用像 JQuery 这样的库，因为它可以让您的代码更加整洁并且非常强大。这可以简单地使用以下代码行来完成：（对于 Web 连接的站点，如果它是供本地使用的，则需要在本地下载文件）
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
那么插入以下代码就很简单了：
$(function(){
if($(window).width() < 768){
$('div.left').hide();
}
});
$(function(){ }); 在页面加载后运行代码。
如果您希望它在调整页面大小时也能正常工作，那么您可以将其放入函数中
function checkSize(){
if($(window).width() < 768){
$('div.left').hide();
}else{
$('div.left').show();
}
}
并在页面加载和屏幕大小调整时调用它，如下所示：
$(function(){
checkSize();
});
$( window ).resize(function() {
checkSize();
});
【讨论】：
这不是很优雅，但您可以将整个 div 设为字符串并将其放入脚本块中的 if 语句中。这样你检查窗口大小，如果它不够大，它就会跳过所有的 html：
<script>
if ($(window).width() > 768) {
$("body").prepend("<div class='left'> Whatever stuff is in your div </div>");
}
</script>
【讨论】：