Iphone 6+中的断点

Question

我的响应式网格出现了一些问题。这与我的断点有关。为了查看断点是否在Blisk浏览器中工作，我从设置字体的颜色开始，这样我就可以看到发生了什么变化。

我将第一个设置为414px的原因是，它可以在除6+和Nexus6以外的所有手机上使用，但这些断点不起作用。标题文本不会改变颜色。

我是不是做错了什么？

@media only screen and (max-device-width : 414px) {

    .header-box {
    background-color: #163A4E;
    height: 550px;
    margin-bottom: 0px;
    padding: 0px;
    }

    .header-text h1 {
        color:red;
    }

    .header-text h2 {
        color:green;
    }
}

/* Iphone 6 + and Nexus 6*/
@media only screen and (min-device-width : 415px) and (max-device-width : 736px) and (orientation : portrait) { 
      .header-text h1 {
        color:yellow;
    }

    .header-text h2 {
        color:pink;
    }

}

Answer 1

好吧，首先你有max-device-width，但它应该是max-width，因为device-width is deprecated

另外，从it is not working开始就不要使用orientation (现在还没有)。

您的CSS将如下所示：

@media only screen and (max-width : 414px) {

    .header-box {
    background-color: #163A4E;
    height: 550px;
    margin-bottom: 0px;
    padding: 0px;
    }

    .header-text h1 {
        color:red;
    }

    .header-text h2 {
        color:green;
    }
}

/* Iphone 6 + and Nexus 6*/
@media only screen and (min-width : 415px) and (max-width : 736px) { 
      .header-text h1 {
        color:yellow;
    }

    .header-text h2 {
        color:pink;
    }

}