CSS媒体查询中的宽高比和设备宽高比之间的差异

时间:2011-04-20 05:19:22

标签: css media-queries

aspect-ratiodevice-aspect-ratio之间简单术语的区别是什么?

5 个答案:

答案 0 :(得分:37)

对于那些对宽高比目标显示区域输出设备之间的区别感到困惑的人:

目标展示区域

  

浏览器窗口的宽高比或网站显示的区域   (特殊情况例如是嵌入式网站)

输出设备

  

屏幕的物理宽高比。例如。您的智能手机或桌面显示器

由于智能手机和平板电脑通常仅以全屏模式显示应用,因此宽高比设备宽高比相同。在台式计算机上,情况并非总是如此,因为用户可以调整浏览器窗口的大小,从而改变宽高比。

我希望它有所帮助。

答案 1 :(得分:3)

移动设备的功能差异在于,使用软键盘会改变宽高比但不会改变设备宽高比。

答案 2 :(得分:3)

宽高比测量视口区域。 设备纵横比测量设备屏幕区域。

答案 3 :(得分:2)

aspect-ratio

  

描述输出设备的目标显示区域的宽高比。该值由两个由斜杠(“/”)字符分隔的正整数组成。这表示垂直像素数上的水平像素数。

Source

device-aspect-ratio

  

描述输出设备的宽高比。该值由两个由斜杠(“/”)字符分隔的正整数组成。这表示垂直像素数上的水平像素数。

Source

答案 4 :(得分:0)

ASPECT RATIO

视口宽高比或设备宽高比是宽度的比率 到了高度。因此,如果屏幕宽1000像素,高500像素, 设备纵横比为2:1,因为1,000是500的两倍。 屏幕比例差别很大,即使乍一看它们很漂亮 所有看起来都像是一个类似的矩形。​​

常用显示器宽高比为16:9(例如1920×1080或1366× 768像素)或16:10(1280×800)。 iPhone 3和4S是3:2(480×320 和960×640)和iPhone 5是16:9(1136×640)。 Android手机 通常是4:3,3:2,16:10或16:9。

示例:

@media only screen and (device-aspect-ratio: 16/9)
{ ... }
@media only screen and (min-device-aspect-ratio:
1920/1080) { ... }