Question

我有一个使用Foundation的响应式网格。我使用PHP生成每个row的HTML，每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列。如果不使用某些服务器端代码来检测设备大小，这是否可行？

Answer 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>

Answer 2

如果你正在使用jQuery，你可以简单地通过窗口的客户端大小：

＆＃13;

$(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

＆＃13;

CSS Grid，4个大列，3个中等

2 个答案: