我正在尝试创建一个包含/排除基于最大宽度和设备像素比的规则。一个示例是,如果我希望排除 Kindle Fire @ 600px,但要触发 iPhone5 @640(较小的真实世界屏幕)。
以下是 AND 还是 OR 规则?假设它制定了一个 OR 规则,我将如何创建一个执行 AND 类型函数的规则(必须同时通过 'device-pixel-ratio of 2' 和 'max-width 749px' 检查才能触发)
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (max-width: 749px){
}
编辑如下:
好的,这就是我目前所知道的——我猜逗号是 OR,而“and”显然是 AND。这样对吗?我正在尝试制作一组更通用的查询,而不仅仅是针对 iPhone/iPad...
@media
only screen and (max-device-width : 721px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-device-width : 721px) and (orientation : portrait) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 359px) {
/* All Portrait Phones */
}
@media
only screen and (min-device-width : 360px) and (max-device-width : 999px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-width : 360px) and (max-device-width : 999px) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 999px) {
/* Small tablets (assume vertical) and landscape phones */
}
/*note - Anything over 999 wide to render fully - desktop, landscape or large tablets */
最佳答案
对具有 Retina 显示屏 的 iPad 使用此示例中的媒体查询。
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }
关于css - 媒体查询像素密度和最大宽度一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16030041/