CSS 网格，4 大列，3 中答案

【问题标题】：CSS Grid, 4 large columns, 3 mediumCSS 网格，4 大列，3 中
【发布时间】：2014-10-29 20:07:44
【问题描述】：

我有一个使用 Foundation 的响应式网格。我使用 PHP 生成 HTML 的每个row，每 3 列创建一个新行。

<?php for($i=0 ; $i<12 ; $i++) {
if($i%4==0) { ?>
    <div class='row'>
<?php } else { ?>
   <div class='3-large 12-small columns'>
      <img src='xxx'>
   </div>
<?php }
if(($i+1)%4==0) { ?>
    </div>
<?php } ?>

我正在尝试为大屏幕（如上）显示 4 列，为中屏幕显示 3 列。如果不使用一些服务器端代码来检测设备大小，这是否可行？

【问题讨论】：

无法在服务器端 (PHP) 检测屏幕大小，但您可以在客户端 (JavaScript) 检测。您还可以使用 JavaScript 创建行
是的，它是自动工作，但作为响应式
您可以通过使用javascript将其发送到服务器来检测客户端的屏幕尺寸。这样的事情可以使用 AJAX 请求来执行，该请求在页面加载时调用 PHP 脚本，告诉它客户端的分辨率是什么，并等待服务器回答他需要的内容。然而，这种事情并没有真正的响应：通常使用媒体查询并为不同的设备尺寸创建不同的布局就足够了。

标签： php css zurb-foundation

【解决方案1】：

一种方法是在基础中使用visibility 类-

<?php for($i=0 ; $i<12 ; $i++) {
if($i%4==0) { ?>
    <div class='row'>
<?php } else { ?>
   <div class='large-3 show-for-large-only  columns'>
      <img src='xxx'>
   </div>
<?php }
if(($i+1)%4==0) { ?>
    </div>
<?php } ?>

<?php for($i=0 ; $i<12 ; $i++) {
if($i%4==0) { ?>
    <div class='row'>
<?php } else { ?>
   <div class='small-4 show-for-small-only columns'>
      <img src='xxx'>
   </div>
<?php }
if(($i+1)%4==0) { ?>
    </div>
<?php } ?>

但这会导致您的 html 文档中的内容重复。

我建议使用基金会的block grid

<div class='small-block-grid-3 large-block-grid-4'>
    <img src='xxx'>
    <img src='xxx'>
    <img src='xxx'>
    <img src='xxx'>
</div>

【讨论】：

方块网格非常适合这个

【解决方案2】：

如果您使用的是 jQuery，您可以简单地通过客户端窗口大小获取：

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

【讨论】：