使用php更改屏幕大小的计数器值

我在外部页面中加载wordpress内容。我在3列中显示de内容。我创建了一个计数器来实现这一点。这是完美的，除了我想让它响应。这适用于缩略图，但不适用于列。如果屏幕或浏览器大小小于1024px，如何在PHP中将3列的值更改为1？这是我的密码，谢谢你的帮助

<?php
$compteur=0;
    echo "<table width='100%'><tr>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
    foreach ($posts as $post) 
{

setup_postdata( $post );
    echo "<td width='30%'>";
    echo "<br />";
    if ( has_post_thumbnail() ) {
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
     echo '<img width="100%" src="' . $image_src[0] . '">';
}
    echo the_date();
    echo "<br /><h1>";
    echo the_title();
    echo "</h1>";
    echo the_excerpt();
    echo "<td />";

    $compteur++;

if ($compteur==3)
{
    echo "<tr/><tr>";
    $compteur=0;
}
}
    echo "<tr /><table/>" ; 
?>

---

使用媒体查询并将单元格设置为块：

@media (max-width: 1024px) {
  td {
    display: block;
  }
}

实际上，您可能希望给表一个类，并在规则中使用该类，这样就不会影响每个表

此外，如上面的评论所述，使用div而不是表单元格将更容易处理

例如：

$compteur=0;
echo "<div width='100%'>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
foreach ($posts as $post) {
  setup_postdata( $post );
  echo '<div class="col">' . "\n";
  if ( has_post_thumbnail() ) {
    $image_src = wp_get_attachment_image_src(get_post_thumbnail_id(),’thumbnail’ );
    echo '<img width="100%" src="' . $image_src[0] . '">';
  }
  echo the_date();
  echo "\n<h1>";
  echo the_title();
  echo "</h1>";
  echo the_excerpt();
  echo "</div>";

  $compteur++;

 if ($compteur==3)
 {
    $compteur=0;
 }
}
echo "</div>" ; 

我的错，它完全起作用了

代码如下：

<div id="articles">
<?php
$compteur=0;
    echo "<div width='100%'>";
    echo '<div class="colonnes">';
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
    foreach ($posts as $post) 
{

setup_postdata( $post );
    echo '<div class="col">' . "\n";
    echo "<br />";
    if ( has_post_thumbnail() ) {
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
     echo '<img width="100%" src="' . $image_src[0] . '">';
}
    echo the_date();
    echo "<br /><h1>";
    echo the_title();
    echo "</h1>";
    echo the_excerpt();
    echo "</div>";

    $compteur++;

if ($compteur==3)
{
    echo "</div>";
    echo '<div class="colonnes">';
    $compteur=0;
}
}
    echo "</div /></div>" ; 
?>
</div>

谢谢您的帮助。
好的，这台正在工作。现在我尝试在几个页面中显示帖子。我更改代码并添加上一个/下一个导航。当我点击next时，我得到了一个错误的链接，一个404页的实际网站。那么，请问怎么了

<?php
$compteur=0;
    echo "<table width='100%'><tr>";
$posts = get_posts('numberposts=100&order=DESC&orderby=post_date');
    foreach ($posts as $post) 
{

setup_postdata( $post );
    echo "<td width='30%'>";
    echo "<br />";
    if ( has_post_thumbnail() ) {
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
     echo '<img width="100%" src="' . $image_src[0] . '">';
}
    echo the_date();
    echo "<br /><h1>";
    echo the_title();
    echo "</h1>";
    echo the_excerpt();
    echo "<td />";

    $compteur++;

if ($compteur==3)
{
    echo "<tr/><tr>";
    $compteur=0;
}
}
    echo "<tr /><table/>" ; 
?>

<div class="navigation"><p><?php posts_nav_link(); ?></p></div>
<div id="articles">
<?php
$args = array( 'posts_per_page' => 3 );
$compteur=0;
    echo '<div class="tableau">';
    echo '<div class="colonnes">';
$posts = get_posts($args,'order=DESC&orderby=post_date');
    foreach ($posts as $post) 
{

setup_postdata( $post );
    echo '<div class="col">' . "\n";
    echo '<div class="img-crop">';
    if ( has_post_thumbnail() ) {
    echo '<a href='.post_permalink($ID).'>';
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
     echo '<img src="' . $image_src[0] . '">';
}
    echo '</a>';
    echo '</div>';
    echo '<br/>';
    echo '<div class="date">';
    echo the_time('j F Y');
    echo "</div>";
    echo '<div class="title">';
    echo the_title();
    echo "</div>";
    echo '<div class="excerpt">';
    echo the_excerpt();
    echo "</div>";
    echo "</div>";

    $compteur++;

if ($compteur==3)
{
    echo "</div>";
    echo '<div class="colonnes">';
    $compteur=0;
}
}
    echo "</div /></div>" ; 
?>
</div>


输出是否需要使用
表格
？这些都是非常差的响应设计。您最好使用
div
然后设置。谢谢您的回答。您的解决方案适用于小于1024px的屏幕，但我没有检索到大屏幕中显示的3列。我注意到我没有使用float:left作为col。您可以在此处看到的是work:，其中我使用了彩色div来代替图像。
<div class="navigation"><p><?php posts_nav_link(); ?></p></div>
<div id="articles">
<?php
$args = array( 'posts_per_page' => 3 );
$compteur=0;
    echo '<div class="tableau">';
    echo '<div class="colonnes">';
$posts = get_posts($args,'order=DESC&orderby=post_date');
    foreach ($posts as $post) 
{

setup_postdata( $post );
    echo '<div class="col">' . "\n";
    echo '<div class="img-crop">';
    if ( has_post_thumbnail() ) {
    echo '<a href='.post_permalink($ID).'>';
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
     echo '<img src="' . $image_src[0] . '">';
}
    echo '</a>';
    echo '</div>';
    echo '<br/>';
    echo '<div class="date">';
    echo the_time('j F Y');
    echo "</div>";
    echo '<div class="title">';
    echo the_title();
    echo "</div>";
    echo '<div class="excerpt">';
    echo the_excerpt();
    echo "</div>";
    echo "</div>";

    $compteur++;

if ($compteur==3)
{
    echo "</div>";
    echo '<div class="colonnes">';
    $compteur=0;
}
}
    echo "</div /></div>" ; 
?>
</div>