媒体查询 <body> div 有效，但其他的无效

Question

我正在尝试为 iPhone 进行媒体查询。但是，由于某些原因，"mobile" div 中的信息没有显示，唯一显示的是背景图像。

感谢您提供的任何帮助。提前致谢。

HTML:

<div id="wrap">
       <div id="header">
            <p id="placeholder">
                full-site<br>coming soon<span>.</span><span>.</span><span>.</span>
            </p>

            <p id="time">
                OPEN DAILY<br>8am &#8211; 8pm
            </p>

        </div>

        <div id="main">
            <img id="animate" src="assets/daily_web_logo_2.gif" alt="The Daily Roundup">        
        </div>

    </div>

     <div id="footer">

        <p id="address">hello</p>

        <p id="colophon"> 
            MADE WITH LOVE BY 
        </p>
    </div>

     <div id="mobile">

        <img id="logotype" src="assets/daily_mobile_logo.png" alt="The Daily Roundup">

        <p id="time2">
            Open Daily 8am to 8pm
        </p>

        <p id="facebook">
            Get The Daily Roundup on Facebook
        </p>

        <p id="email">
            Email us
        </p>

        <p id="address2">hello</p>

    </div>


    </body>

CSS:

*{
    margin: 0;
    padding: 0;
}

html, body{
    height: 100%;
    width: auto;
}


@font-face{
    font-family: "AkkuratPro-Reg";
    src: url("type/AkkuratPro-Regular.otf");
}

body{
    background-color: #faf2da;
}

a{
    text-decoration: none;
    color:black;
}

#colophon{
    color:black;
}

 @media only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio : 2){

    html, body{
        height: auto;
        width: auto;
    }

    body{
        background: url(../assets/daily_mobile_background.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
        background-size: cover;
    }

    #wrap, #footer{
        display:none;
    }

    #logotype{
        float:left;
    }

    #time2, #facebook, #email, #address2{
        font-family: "AkkuratPro-Reg", sans-serif;
        font-size: 25px;
        letter-spacing: 1px;
    }

    #time2{
        padding-top:90px;
    }

    #facebook, #email{
        padding-top:40px;
        line-height: 120%;
        text-decoration: underline;
    }

    #address2{
        padding-top:40px;
        line-height: 120%;
    }



 }

Answer 1

我看不到任何引用您的 #mobile div 的内容。试试这些。

/* Large desktop */
@media (min-width: 1200px) { #mobile{ display:none; }}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { #mobile{ display:none; }}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { #mobile{ display:block; }}

/* Landscape phones and down */
@media (max-width: 480px) { #mobile{ display:block; }}

那是来自 Twitter's Bootstrap，顺便说一下

Answer 2

尝试将您的媒体查询更改为；

@media (min-width: 320px) and (max-width: 667px) {
   /* your css here */
}

类似这样； https://jsfiddle.net/c318fnfo/

媒体查询 <body> div 有效，但其他的无效

Media Queries <body> div works but others do not

html

css

media-queries