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

||
aspect-ratio
device-aspect-ratio
在简单上有什么区别?
已邀请:
aspect-ratio
描述输出设备目标显示区域的纵横比。该值由两个正整数组成,两个正整数之间用斜杠(\“ / \”)字符分隔。这表示水平像素数超过垂直像素数。 资源。
device-aspect-ratio
描述输出设备的纵横比。该值由两个正整数组成,两个正整数之间用斜杠(\“ / \”)字符分隔。这表示水平像素数超过垂直像素数。 资源。
对于每个对目标显示区域和输出设备之间的长宽比差异感到困惑的人: 目标展示区 浏览器窗口或网站显示区域的长宽比 (例如,一种特殊情况是嵌入式网站) 输出设备 屏幕的物理纵横比。例如。您的智能手机或台式机显示器 由于智能手机和平板电脑通常仅以全屏模式显示应用程序,因此宽高比和设备宽高比是相同的。在台式计算机上,由于用户可以调整浏览器窗口的大小,因此宽高比会发生变化,因此这并非总是如此。 希望对您有所帮助。
移动设备上的功能差异在于,弹出软键盘会更改长宽比,但不会更改设备长宽比。
纵横比衡量视口区域。 device-aspect-ratio测量设备屏幕区域。
纵横比 视口的宽高比或设备的宽高比是宽度的比例 达到高度因此,如果屏幕的宽度为1,000像素,高度为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) { ... }

要回复问题请先登录注册