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

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

此媒体查询针对所有 ipad。

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