我正在尝试在多个 iPhone 屏幕上优化我的移动网页体验，尤其是 5/5s 和 6/6s。我试图根据屏幕以不同的方式影响元素的位置属性，即“如果屏幕是 5/5s，则执行此操作”，“如果屏幕是 6/6s，则执行此操作”。然而，一个查询只是覆盖了另一个，而不是做它自己的特定事情。
这是我的 CSS:
/* for iPhone 6/6S */
@media (max-width:730px) {
.fore-man {
top: 1100px;
}
/* for iPhone 5/5S */
@media (max-width:560px) {
.fore-man {
top: 1100px;
}
我如何将其更正为特定于屏幕而不只是覆盖之前的查询？
最佳答案
向 6/6s 查询添加最小宽度是否有效？
/* for iPhone 6/6S */
@media (max-width:730px) and (min-width: 561px) {
.fore-man {
top: 1100px;
}
}
/* for iPhone 5/5S */
@media (max-width:560px) {
.fore-man {
top: 1100px;
}
}
根据这篇文章，使用设备宽度属性可以更好地定位设备屏幕。
看看，here
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
关于html - 如何设置单独的媒体查询来影响同一个元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35329644/