css - Iphone 6+ 中的断点

Question

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

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

我是不是做错了什么？

@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 (还)。

您的 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;
    }

}