排队时，屏幕内function.php WordPress的

-2

我现在有这我加载在我的主题function.php两个CSS文件大小不同的CSS。这些CSS文件是'main.css'&'mobile.css'。 'mobile.css'在屏幕尺寸最小或等于'max-width：500px'时加载。问题是，如果我调整大于500px到< 500px的窗口，它不会加载并覆盖'main.css'。排队时，屏幕内function.php WordPress的

下面是我入队中的文件：

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)');

反正是有与“mobile.css”的function.php文件，或实现这一点任何其他适当的方式中的文件，并覆盖“的main.css”中加载任务仍然有两个文件分开。

编辑：它检测时窗口已经小于500像素，但不一样，如果我手动调整较大的窗口。

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

来源

2017-06-01 The Little Cousin

您是否已验证您的'mobile.css'确实正在加载？如果在'main.css'的'mobile.css'中使用相同的选择器，则'mobile.css'中的样式将覆盖'main.css'中的样式。如果'mobile.css'中的选择符比'main.css'中的选择符低，那么它们**将不会被应用**，除非它是最初没有在'main.css'中定义的属性。您可以使用浏览器的开发工具来验证所有这些。 – hungerstar

你必须显示你的css文件，如果可能的话，还有一些DOM检查，只是看到php的加载并不容易。 – calexandre

@hungerstar移动。如果我调整窗口的大小，CSS不会被加载。它只在窗口已经小于500px时加载 –

你的样式表没有被应用，因为视口的尺寸被加载页面时的原因。根据MDN：

当媒体查询是真实的，相应的样式表或风格规则被应用于，按照正常级联规则。样式表与连接到他们的标签仍然会下载即使他们的媒体查询将返回false媒体查询（它们将不适用于对）。

这意味着如果该视口是上述当页面被加载500px和true当500px或更少的规则max-width: 500px将评估为false。如上所述，如果评估为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; 
    } 

}

以上是移动第一种方法的例子，你不“包含”移动样式媒体的质疑，而是平板电脑，台式机等。样式是。

这是CodePen demonstrating上面的方法。

来源

2017-06-01 18:19:36 hungerstar

您是否可以编辑并添加，同时加载两个文件，然后在移动设备中添加媒体查询。 CSS –

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

您可以创建在样式表规则，当满足一定的条件激活？您可以检查此

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  

}

来源

2017-06-01 17:10:52

排队时，屏幕内function.php WordPress的

回答

相关问题