相关疑难解决方法(0)

各种浏览器的支持似乎有所不同.

检查链接

Firefox:黑色,带白色文字.

Opera,Chrome,IE9:蓝色与黑色文本.

哪个是正确的,我将如何使其保持一致？

代码

@media screen and (min-width: 480px) {

    body{
        background-color:#6aa6cc;
        color:#000;    
    }

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

        body{
            background-color:#000;
            color:#fff;    
        }
    }
}

​

有趣的是,似乎在条件内嵌套媒体查询@import似乎有效.

例如:

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Media test</title>
    <link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
    <h1>Why is this not consistent.</h1>
</body>
</html>

importer.css

@import url(media.css) screen and (min-width: 480px);

media.css

body {
    background-color: #6aa6cc;
    color: #000;
}

@media screen and (min-width:768px) {
    body …

@support规则允许用户对CSS属性进行功能查询.我想知道是否可以对@media规则进行功能检查？

例如,我想知道浏览器是否支持@media指针或任何指针条件:

@supports @media (pointer:fine) {

要么

@supports @media (pointer) {

这似乎不起作用.应该有用吗？

编辑:这不是引用问题的副本.也许我应该澄清这个问题来解释为什么这是一个不同的问题,所以这里是:

我不想在@media中嵌套@supports,反之亦然.我想要检测是否支持@media查询本身,特别是指针的@media规则.这与在媒体查询中嵌套随机支持查询完全不同.