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

问题描述 投票:23回答:5

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

css media-queries
5个回答
2
投票

aspect-ratio

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

Source

device-aspect-ratio

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

Source


37
投票

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

目标显示区域

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

输出设备

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

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

我希望它有所帮助。


3
投票

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


3
投票

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


0
投票

宽高比

视口宽高比或设备宽高比是宽度与高度的比率。因此,如果屏幕宽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) { ... }
© www.soinside.com 2019 - 2024. All rights reserved.