如何解决尝试通过删除 -webkit-min-device-pixel-ratio
我最近遇到了一个使用多个媒体查询的 CSS 文件。每个媒体查询内部都有相同的样式规则。
我基本上想知道我是否可以安全地将这 6 个元查询简化为 2 个,并获得相同的效果。
根据我对 -webkit-min-device-pixel-ratio 的了解,我不确定为什么在这里使用它。为什么有人会根据设备的 pixel ratio 或 resolution 而不是标准的“格式化像素”来定位设备?
/* iPhone X Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
/* portrait rules */
}
/* 6+ Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
/* portrait rules */
}
/* 6 Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
/* portrait rules */
}
/* iPhone X Landscape */
@media screen and (max-device-width: 767px),(max-device-height: 375px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
/* landscape rules */
}
/* 6+ Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
/* landscape rules */
}
/* 6 Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
/* landscape rules */
}
简化:
/* Phone Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (orientation: portrait) {
}
/* Phone Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: landscape) {
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。