css – 媒体查询像素密度和最大宽度

我正在尝试创建一个包含/排除基于最大宽度和设备像素比率的规则.一个例子是如果我想要排除Kindle Fire @ 600px,而是要触发iPhone5 @ 640(更小的真实世界屏幕).

以下是否制定AND或OR规则？假设它生成OR规则,我将如何创建执行AND类型函数的规则(必须同时传递’设备像素比率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.它是否正确？我正在努力制作更多通用的查询,而不仅仅是针对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 */ }

原文链接：https://www.f2er.com/css/427332.html

css – 媒体查询像素密度和最大宽度

猜你在找的CSS相关文章