媒体查询不起作用

Question

我的样式表底部有以下基本媒体查询模板，如此

@media (max-width: 1599px) {
    body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}
}
@media (max-width: 1069px) {
    body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}
}
@media (max-width: 999px) {
body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}

@media (max-width: 767px) {
body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}
}
@media (max-width: 643px) {
body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}
}

/* Mobile devices */
@media (max-width: 359px) {
body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}
}

然而，当我在iOS7上的iPhone 5上观看时，布局没有改变，现在有人为什么这么做？我的标题中是否需要一些东西？

谢谢你们！

Answer 1

使用类似的东西。最好指定样式表的用途。即屏幕，打印等。如果你想在这里，也可以通过像素密度。

body {
    background: #111;
    color: #EEE;
    font-size: 12px;
}

@media only screen  
and (max-width : 1599px) {
    html body {
        background: #000;
        color: #FFF;
        font-size: 10px;
    }
}