在媒体查询中为高分辨率设备设置大字体大小

Question

IPad分辨率为768 * 1024，但移动设备可能为720 * 1024。我想为设备设置更大的字体，所以它的大小与pt相同。例如：

@media (min-width: 700px) { 
    #div_test{ 
    font-size:22px; 
    } 
} 

如何修改@media条件？

Answer 1

@media (min-width: 700px){ 
    /*code*/ 
} 

媒体查询中的min-width属性有点不同。这不是屏幕的分辨率。它是等效的CSS像素。

这里有几篇文章。

A pixel identity crisis。

A pixel is not a pixel is not a pixel。

moz media query page。

如果你想目标设备的分辨率，你应该使用

@media all and (max-device-width: 320px) { 

}. 

max-device-width：此属性测量设备宽度。如果使用这种方式编写使用媒体查询的css，它会变得有点复杂（手机标签，甚至桌面可以有1080p分辨率的屏幕）。为了定位设备分辨率，您可能需要查看诸如 - device-pixel-ratio，orientation和device-height之类的属性，以更好地控制布局。

Here is a list of media queries for ipad

该媒体查询目标的所有的iPad。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { /* STYLES GO HERE */}