Question

这是我在实施媒体查询的 style.css ：

body {
    background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
    background-repeat: no-repeat;
    background-position:bottom left, bottom right;
    }

/* Large desktop */
@media (min-width: 1200px)
    body {
    background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
    background-repeat: no-repeat;
    background-position:bottom left, bottom right;
    }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) 
    body {
        background: #b5ebf9 !important;
    }
/* Landscape phone to portrait tablet */
@media (max-width: 767px)
    body {
        background: #b5ebf9 !important;
    } 
/* Landscape phones and down */
@media (max-width: 480px)
    body {
        background: #b5ebf9 !important;
    }

我在HTML中添加了它，以便检测（我认为这是正确的）：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

显然，链接到标题中的上述CSS文件。

但出于某种原因，背景图像总是显示，而不是颜色#b5ebf9。

我做错了什么？！我花了1-2天时间试图解决这个问题！我试过......

为每个设备制作单独的CSS表格，链接到包含media标签的样式表（无任何反应）
还尝试从上面的CSS中移除第一个正文查询 - 只保留所有设备中的背景颜色，根本没有背景图像！（我希望背景图像显示在桌面屏幕上。）

请帮忙！

Answer 1

您需要{}重新组合媒体查询：

body {
    background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
    background-repeat: no-repeat;
    background-position:bottom left, bottom right;
}

/* Large desktop */
@media (min-width: 1200px){
    body {
        background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
        background-repeat: no-repeat;
        background-position:bottom left, bottom right;
    }
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    body {
        background: #b5ebf9 !important;
    }
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px){
    body {
        background: #b5ebf9 !important;
    } 
}
/* Landscape phones and down */
@media (max-width: 480px){
    body {
        background: #b5ebf9 !important;
    }
}

Answer 2

你可以试试这个： @media only screen和（max-width：979px）和（min-width：768px）{} @media only screen and（max-width：767px）and（min-width：481px）{}

而不只是@meadia

在较小的设备上使用媒体查询不会更改背景

2 个答案: