在不运行服务器端代码的情况下在小屏幕中隐藏 Div答案

【问题标题】：Hiding Div in Small Screens without Running Server Side Code在不运行服务器端代码的情况下在小屏幕中隐藏 Div
【发布时间】：2016-12-26 06:34:41
【问题描述】：

我有一个页面，它将查询所有用户的列表，并将其显示在基于 Cards 组件的设计中。如果屏幕尺寸很小，我想使用不同的设计列出具有所有属性的用户。我可以有两个<div>s；一个用于大屏幕，另一个用于小屏幕，并使用媒体查询 (CSS) 隐藏<div>。问题是，这种情况下会有任何性能劣势吗？我的意思是，大屏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>

代码段 (A) 会被执行但不显示吗？或者它永远不会击中那个部分？请注意，css 类 "show-for-small/large-only 是一个媒体 css 查询 display:none 基于屏幕尺寸。

【问题讨论】：

将代码繁重的
的默认状态设置为 display:none ，然后将其设置为仅在屏幕大于例如...600px 时才使用@media 规则显示。
为什么不用一个 div 设置它，不管屏幕大小如何，然后根据@media-queries 调整/样式不同？只要您无论如何都显示相同的用户列表，只是呈现方式不同？
我同意@junkfoodjunkie。您只需要根据屏幕大小使用 css 调整您的“卡片”设计，而不是让 2 组具有相同内容的不同卡片以不同方式显示。

标签： javascript php html css responsive-design

【解决方案1】：

使用 CSS 媒体查询，它比 JQuery 快得多。

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

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

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

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

【讨论】：

【解决方案2】：

你得到的答案都很好，但我建议你看看 bootstrap (http://getbootstrap.com/)，你可以通过在你的 div 中添加一个 css 类来做你想做的事情。

【讨论】：

【解决方案3】：

你可以试试这个http://mobiledetect.net/

 <?php  
// Include and instantiate the class.
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect; ?> 

// Execute only if the device is mobile
<?php if ( $detect->isMobile() ) { ?>
<div class ="show-for-small-only">
//some for loop in php and other code (A)
</div>
<?php } ?>

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

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

HTML

<div class ="show-for-small-only" id="mobile">
// append here if mobile
</div>


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

jquery

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

【讨论】：

只需使用 css 媒体查询。我用不到 100 个字符完成了同样的效果。
@bastien 不同的是
@BastienBastiens 很好，即使您将其设置为不显示，php 代码将在服务器端执行，这意味着工作量加倍..
您可以根据屏幕大小和/或方向更改卡片的样式，而不是使用两组卡片，这样可以节省大量时间
如果他想让两个 div 分开或放置不同怎么办？