媒体查询像素密度和最大宽度在一起

Joh*_*ohn 5 css media-queries

我正在尝试创建一个包含/排除基于最大宽度和设备像素比率的规则.一个例子是如果我想要排除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){
        }
Run Code Online (Sandbox Code Playgroud)

编辑以下:

好的,这是我到目前为止 - 我猜测逗号是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 */
Run Code Online (Sandbox Code Playgroud)

Aks*_*shi 11

对于带有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 */ }
Run Code Online (Sandbox Code Playgroud)

  • 谢谢@Akshaya.我特意尝试创建适用于所有设备类型的通用媒体查询,因此我使用了您建议的"和"技术并尝试将其混合使用 - 请参阅更新的问题.这是否按预期工作? (2认同)