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

Question

IPad分辨率为768 * 1024，但手机可能为720 * 1024。我想为设备设置更大的字体，因此它在pt中的大小与pad相同。例如：

@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

此媒体查询针对所有ipads。

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