Iphone 6+中的断点

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

我将第一个设置为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; 
    } 

}

来源

2016-08-24 KrMa

你尝试在Chrome测试它？ devtools很棒+ blisk仍处于测试阶段它还不稳定 –

啊好的。我不知道我可以用响应式设计在铬合金上进行测试。我所做的唯一的事情就是拖回第四名，但这样做一直都很耗时。开发人员工具中是否有响应式设计部分？ – KrMa

当然，在左上方你会看到一个带有平板电脑的手机图标，点击它可以开始使用不同的设备，它甚至可以模仿设备的行为，比如设备返回的标头，例如 –

嗯，首先你必须max-device-width但它应该是max-width因为 device-width is deprecated

另外，不要使用orientation因为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; 
    } 

}

来源

2016-08-24 08:14:44

我不喜欢我不知道Blisk，但我总是使用FireFox及其开发工具。 CRTL + SHIFT + M以获得响应式视图。你也可以尝试一些JavaScript来检测使用'alert（“W”+ window.screen.availWidth +“H”+ window.screen.availHeight）的分辨率' –

非常感谢你的回答。有没有一个好的网站，浏览器等我可以测试它，而不是使用Blisk？ – KrMa

好的非常感谢你 – KrMa

Iphone 6+中的断点

回答

相关问题