Question

我目前有两个CSS文件，我在主题的function.php中加载。这些CSS文件是＆＃39; main.css＆＃39; ＆安培; ＆＃39; mobile.css＆＃39 ;. ＆＃39; mobile.css＆＃39;当屏幕的大小最小或等于“最大宽度：500px”时加载。问题是，如果我调整一个> 500px到<500px的窗口，它将不会加载并覆盖＆＃39; main.css＆＃39;。

以下是如何将文件排入队列：

wp_enqueue_style('mainstyle', get_template_directory_uri() . '/css/main.css', array(), '1.0.0', 'all');

wp_enqueue_style('mobilestyle', get_template_directory_uri() . '/css/mobile.css', array(), '1.0.0', 'screen and (max-width: 500px)');

无论如何加载文件并覆盖＆＃39; main.css＆＃39;与＆＃39; mobile.css＆＃39;在function.php文件或任何其他正确的方法来完成此任务，但仍然将两个文件分开。

编辑：它会检测窗口何时已小于500px，但如果手动调整较大窗口的大小则不会。

当我调整更大的窗口时，我需要它来加载CSS。

Answer 1

未应用样式表的原因是因为加载页面时视口的大小。根据{{3}}：

当媒体查询为true时，相应的样式表或样式遵循正常的级联规则应用规则。样式表附加到其标签的媒体查询仍将下载即使他们的媒体查询会返回虚假（他们不会适用，不过）。

这意味着，如果视口在加载页面时高于max-width: 500px，false在500px或更低时，则true将评估为500px。如上所述，如果评估为false，则会下载样式表，但不会应用样式。

现在，我之前从未在media标记中使用过媒体查询，因为上面提到的结果，似乎有点限制。我建议的最好的方法是将桌面样式包装在文件本身的媒体查询中，并将其单独包含在head中，以便评估始终为真，并在调整浏览器大小时应用。

<link href="/css/mobile.css" type="text/css" rel="stylesheet">
<link href="/css/main.css" type="text/css" rel="stylesheet">

CSS文件示例：

// mobile.css
p {
  color: seagreen;
}

// main.css
@media screen and (min-width: 501px) {

  p {
    color: rebeccapurple;
  }

}

以上是移动优先方法的一个示例，您不会＆＃34;包含＆＃34; 移动样式到媒体查询，而是平板电脑，桌面等样式。< / p>

这是MDN上述方法。

Answer 2

如何在样式表中设置规则？

您可以在样式表中创建规则，并在满足特定条件时激活？你可以查看这个

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

类似的东西：

@media only screen 
and (min-width: 450px)
and (max-width: 768px) {

    //change whatever element you want    

}

在function.php Wordpress中调整屏幕大小时，将不同的css排入队列

2 个答案: