媒体查询有关屏幕尺寸而不是分辨率 [英] Media query about screen size instead of resolution

问题描述

是否有解决方法在CSS媒体查询中使用物理屏幕宽度?今天，有些电话已经超过了台式机显示器的分辨率.但是，电话仍应显示移动版式，而台式机应显示标准版式.

Is there a workaround to use physical screen width in CSS media queries? Today, there are phones which exceed the resolution of desktop monitors. However, phones should still display the mobile layout and desktops the standard layout.

因此，我不能像下面的示例那样依赖基于像素的查询.相反，我需要物理测量或像素密度测量.

So I can't rely on pixel based queries like the example below. Instead, I need either a physical measurement, or one about the pixel density.

@media screen and (min-width: 700px) {

}

由于我尚未通过研究发现此类测量，因此它们可能不存在.无论如何，通常如何解决这个问题?

Since I haven't found such measurements through my research, they might not exist. Anyway, how is this problem approached typically?

推荐答案

首先，CSS像素为角度测量，并在设备之间进行了标准化.并非完全如此，但足以使它在大多数情况下不成问题.

Well, for starters, the CSS pixel is an angular measurement and is decently normalized between devices. Not entirely, but enough so for this to be a non-issue in most cases.

我个人以 em s来衡量媒体查询，以便它们与我的字体大小相关.我的意思是，人们通常会访问一个网站来阅读在该网站上找到的文字，因此，只要每行有合理数量的单词，我就会感到满意.

Personally I measure media queries in ems so that they're relative to my font size. I mean, people usually visit a web site to read the text found on the website, so as long as there's a reasonable amount of words per line I'm satisfied.

您实际上不应该使用物理(设备)的宽度来进行度量，因为人们可能会使UI元素占用空间(或者根本无法全屏运行其浏览器).

You really shouldn't measure with physical (device) widths because people may have UI elements taking up space (or simply not run their browsers in full screen).

这篇关于媒体查询有关屏幕尺寸而不是分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！