Question

如何在PHP中使用媒体查询？我已经有了一个代码，但问题是当你改变窗口的大小时，设计不会改变。有可能吗？

        <?php
      if (isset($_GET['width'])) {
        $width = $_GET['width'];
        if ($width <= 800) { //mobile devices
          $style = '<link rel="stylesheet" href="mobile.css" type="text/css">';
        } else { //desktop
          $style = '<link rel="stylesheet" href="style.css" type="text/css">';
        }
        echo $style;
      } else {
          echo "<script language='javascript'>\n";
          echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}" . "&width=\" + screen.width; \n";
          echo "</script>\n";
          exit();
      }
    ?>

Answer 1

在呈现页面之前执行PHP。如果你的目标是更动态的行为，我建议使用JS。更像是这样：

$(window).resize(function(){
    ...
});

或在Vanilla JS中

window.onresize = function(event) {
    ...
};

有了这个，您实际上可以加载/卸载您提到的CSS文件。

我的建议是仅依靠一个包含所有媒体查询的好（且唯一）的CSS文件。

Responsive Web Design - Media Queries

Answer 2

我不知道这是如何工作的，因为PHP在浏览器宽度确定之前运行。然而，无论如何它都没有必要。您要做的是将媒体查询应用于链接元素。

<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobile.css"/>
<link rel="stylesheet" media="screen and (min-width: 801px)" href="style.css"/>

如何在PHP中使用Media Query？

2 个答案: