Javascript 在小屏幕中隐藏Div而不运行服务器端代码

我有一个页面，它将查询所有用户的列表，并将其显示在基于卡片组件的设计中。如果屏幕尺寸很小，我想使用不同的设计列出具有所有属性的用户。我可以有两个

s；一个用于大屏幕，另一个用于小屏幕，并使用媒体查询（CSS）隐藏

。问题是，这种情况下会不会有性能上的劣势？我的意思是，当屏幕很小时，大屏幕的div中的服务器端代码会被执行吗，即使它没有显示

例如，您正在大屏幕上浏览此页面

<div class ="show-for-small-only">
//some for loop in php and other code (A)
</div>
<div class ="show-for-small-only">
//some for loop and other php code (B)
</div>

//php和其他代码中的一些for循环（A）
//一些用于循环和其他php代码（B）

代码段（A）是否执行但不显示？或者它永远不会击中那个部分？请注意，css类“show for small/large only”是一个要显示的媒体css查询：无基于屏幕大小。

您可以尝试使用此

//仅当设备是移动设备时执行
//php和其他代码中的一些for循环（A）
//一些用于循环和其他php代码（B）

或者，如果屏幕尺寸较小，可以使用jquery和相应的样式将较大的display div中的内容附加到较小的display div中

Html

//如果是移动的，请在此追加
//一些用于循环和其他php代码（B）

Jquery

if($(document).width() <= 450){ 
$("#wrapper").appendTo("#mobile");
}

---

if（$（document）.width（）使用CSS媒体查询，比JQuery快得多

@media screen and (min-width: 480px) {
    .show-for-small-only {
        display: none;
    }
} 

但您应该根据视口大小和/或屏幕方向调整卡的设计，而不是使用两种不同的样式加载卡，如：

.title-section {
  position:absolute;
  top:2%;
  left:0%;
}

@media screen and (min-width: 480px) {
    .title-section {
        left: auto;
        right: 0%;
    }
} 

您得到的答案都很好，但我建议您看看bootstrap（），使用它，您只需在div中添加一个css类即可完成所需操作。
将代码重的默认状态设置为“显示：无”，然后仅当屏幕大于例如…600px时，才将其设置为使用@media规则显示。为什么不使用一个div来设置它，而不考虑屏幕大小，然后调整/style基于@media查询？只要你想显示相同的用户列表，只是呈现方式不同？我同意@junkfoodjunkie。你只需要调整你的“卡片”"根据屏幕大小使用css进行设计，而不是让两组不同的卡片以不同的方式显示相同的内容。只需使用css媒体查询即可。我在不到100个字符的时间内完成了相同的效果。@bastienwould@BastienBastiens即使将其设置为“无”，php代码也将被执行服务器端的ed意味着加倍工作。您可以根据屏幕大小和/或方向更改卡的样式，而不是使用两套卡，这可以节省大量时间，如果他希望两个div分开或不同的位置，该怎么办？
@media screen and (min-width: 480px) {
    .show-for-small-only {
        display: none;
    }
} 

.title-section {
  position:absolute;
  top:2%;
  left:0%;
}

@media screen and (min-width: 480px) {
    .title-section {
        left: auto;
        right: 0%;
    }
}