Question

我想为移动版本保留不同的背景图片。我应用了媒体查询，但仍未采用。

CSS：

#banner{
    margin:0 0 0 0;
    padding:0 0 0 0;
    background-image:url(images/bg.jpg);
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    width:100%;
    height:2816px;
}

@media (max-width: 480px) {

    #banner{
        background-image:url(images/cooper.png);
        /*display:none;  Doesnt shows anything*/
    }
}

有什么建议吗？

Answer 1

尝试此元标记和媒体查询..

<header>
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</header>




  /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px) {
    /* Styles */
    }

    /* iPads (landscape) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }

    /* iPads (portrait) ----------- */
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }

    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    }

    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    }

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

Answer 2

它不起作用，因为你没有给出bg-images以及div#banner的大小：

working fiddle

 div, html, body {
    width:100%;
    height:100%;
}
#banner {
    margin:0 0 0 0;
    padding:0 0 0 0;
    background-image:url(http://www.mpa-garching.mpg.de/galform/cr/CR_TCDM_dump40_400_170000_12000_100_blue.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-position:center;
    position:absolute;
    width:100%; /* u have set this here, so this is fine */
    height:2816px;
}
@media only screen and (max-width: 480px) {
    #banner {
        width:100%; /* u have no set this here, so this is not working for you */
        height:100%;/* u have no set this here, so this is not working for you */
        background: red url('http://bingbangstudios.com/press/fork/fork_pixie_400x400.jpg');
        background-size:100% 100%; /* notice this here too*/
        /*display:none;  Doesnt shows anything*/
    }
}

Answer 3

您不需要太多编码。只需编写如下代码 -

#banner{
    margin:0 0 0 0;
    padding:0 0 0 0;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    width:100%;
    height:2816px;
}

@media (min-width: 480px) {
    #banner{
        background-image:url(images/bg.jpg);
    }
}

@media (max-width: 480px) {
    #banner{
        background-image:url(images/cooper.png);
    }
}

Bootstrap 3：如何为（手机/平板电脑）版本提供不同的图像？

3 个答案: