Question

我正在尝试将宽度响应元素添加到客户端页面。该网站是用PHP制作的，我不熟悉。我相信他也在使用Wordpress（我也不熟悉）。

.php页面没有任何头标记来添加外部或内部css，并且尝试添加头部没有产生任何结果。他告诉我他所有的css都是从一个名为“style.css”的文件中加载的（虽然我找不到任何实际的链接）但是尝试将css添加到该文件中也没有在页面上产生任何结果。我能够使用内联css设置元素的样式，但显然没有办法在线设置@media查询。

作为最后的努力，我终于使用Javascript和window.matchMedia工作，但它只检测窗口重新加载时的大小（这是我遇到的第二个单独的问题）。我还是更喜欢用某种方式使用css。

Answer 1

Wordpress是使用PHP创建的CMS（内容管理系统）。它提供了一个很好的界面来轻松创建一个网站。它还具有各种已经制作的PHP功能，可以快速构建一个功能齐全的网站。

看到你想玩@media，你不需要触及任何PHP的东西。

Wordpress网站可以被描述为“主题”。主题位于wp-content文件夹下。您只需要找到“themes”文件夹的方式，然后选择WordPress当前使用的主题。

找到主题后，会有一个名为“style.css”的文件。这是该主题的主要CSS文件。如果我要添加任何“响应式设计”，它将在该文件中。我建议你从该文件的末尾开始添加@media代码。

其他信息：

PHP - 超文本预处理器。它是一种编程语言，允许您在服务器实际将其发送到客户端之前构建HTML页面的结构。

Answer 2

最终的解决方案是使用Javascript而不是CSS来检测页面宽度。

  if (window.matchMedia("(min-width: 1300px)").matches)
    {
    $("#loading").css ("display", "inline");
    }

Answer 3

有一个专门用于WordPress的完整堆栈，您可以获得比我能提供的质量高得多的答案。 https://wordpress.stackexchange.com/

选项1：使用定制工具插入CSS

通常在WordPress中，您可以登录到后端，使用菜单转到：

Appearance -> Themes

找到您的主题（该主题将处于活动状态）。然后，如果您将鼠标悬停，请点击：

Customise -> Additional CSS

您可以在其中放置样式，主题将使用它们。

在个人层面上，我真的很讨厌这是最常用的方法，但是它快速且有效，并且您不需要学习WordPress。

选项2：使用子主题并将样式表排入头部

您还可以创建一个child theme（如果尚未创建，则称为主题名称-子级）。子主题将意味着，如果模板已更新，您的更改将不会被删除，但是内联处理可能会导致问题。

如果创建子主题（最简单的方法是先安装子主题生成器插件，然后在完成后将其卸载，尽管上面的链接中还有一些说明，如果您想手动进行并理解该过程。 / p>

创建后，您可以找到functions.php。在此文件中，您可以做各种事情（也可以破坏WordPress，因此请在使用前备份文件）。它主要用于将内容添加到WordPress。

您可以加入样式，这意味着它会在头部被调用。

发件人：https://developer.wordpress.org/reference/functions/wp_enqueue_style/

wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )

function wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' ) {
    _wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );

    $wp_styles = wp_styles();

    if ( $src ) {
        $_handle = explode( '?', $handle );
        $wp_styles->add( $_handle[0], $src, $deps, $ver, $media );
    }
    $wp_styles->enqueue( $handle );
}

我经常发现这是一个更好的解决方案，因为我可以在代码编辑器中使用CSS。

选项3：创建子主题，覆盖header.php文件并手动添加样式表

另一种实现方法是在child theme中使用替代。创建子主题时，复制到该主题的所有文件都将覆盖主主题中的文件。

通常，您可以在主题中找到一个名为header.php或head.php的文件。通常是在页面顶部添加内容的文件（您应该看到元素或样式表以帮助您识别此内容。将该文件复制到子主题中，以避免在更新时被覆盖，并手动将任何CSS /脚本添加为您将拥有纯HTML网站。

Answer 4

您可以使用以下代码段执行此操作：

<?php
if (isset($_GET['width'])) {
  $width = $_GET['width'];
    if ($width <= 480) {include ('mobile_file.php');} //mobile devices
} else {
echo "<script language='javascript'>\n";
echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}" . "&width=\" + screen.width; \n";
echo "</script>\n";
exit();
}
?>

在上面的代码段中，我提供了一个基于屏幕尺寸的文件。

您可以包含不同的样式：

<?php
  if (isset($_GET['width'])) {
    $width = $_GET['width'];
    if ($width <= 480) { //mobile devices
      $style = '<link rel="stylesheet" href="mobile.css" type="text/css">';
    } elseif ($width <= 720){ //tablets
      $style = '<link rel="stylesheet" href="tablet.css" type="text/css">';
    } else { //desktops
      $style = '<link rel="stylesheet" href="desktop.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();
  }
?>

我之前写了一篇关于如何做到这一点的文章：https://tutbakery.com/how-to-use-media-queries-in-php/

如何在PHP中使用@media查询？

4 个答案: