2

这是我实现媒体查询的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 中删除第一个正文查询 - 它只是在所有设备上保持该颜色的背景，根本没有背景图像！（我希望背景图像显示在桌面屏幕上。）

请帮忙！

4

2 回答 2

4

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

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;
    }
}
于 2013-06-03T17:12:00.940 回答
0

你可以试试这个：@media only screen and (max-width: 979px) and (min-width:768px) {} @media only screen and (max-width: 767px) and (min-width:481px) {}

而不仅仅是@meadia

于 2013-06-03T17:09:46.150 回答