在媒體查詢中爲高分辨率設備設置大字體大小

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 */}