我的响应式网格存在一些问题。这大概与我的断点有关。为了查看断点在Blisk浏览器中是否正常运行，我首先在字体上设置了颜色，然后就可以看到变化了。
之所以将第一个设置为414像素，是因为它可以在除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;
}
}
好吧，首先您要拥有，max-device-width但应该max-width因为device-width已弃用
另外，请勿使用，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;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句