Question

我有一个页面，它将查询所有用户的列表，并将其显示在基于Cards组件的设计中。如果屏幕尺寸很小，我想使用不同的设计列出具有所有属性的用户。我可以有两个<div>个;一个用于大屏幕，另一个用于小屏幕，并使用媒体查询（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查询：无基于屏幕大小。

Answer 1

使用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%;
    }
}

Answer 2

你给出的答案都很好，但我建议你去看看bootstrap（http://getbootstrap.com/），你可以通过添加一个css类来做你想做的事情。的div。

Answer 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");
}

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

3 个答案: