【CSS】利用宽高比例的媒体查询

aspec-ratio

• 取值：value (x/y)
• 接收min/max前缀：是

aspect-ratio描述了输出设备目标显示区域的宽高比。该值包含两个以/分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。

device-aspect-ratio

这个和aspect-ratio很类似，描述的是输出设备的宽高比。该值包含两个以/分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。

这两个用于媒体查询可以解决许多宽高比例较大的安卓机器的适配问题。
比如这样：

/*宽屏Android*/
@media only screen and (min-aspect-ratio: 6/10){
    .packetTop {
      position: relative;
      margin: 18% 11% 20px;
    }
    .packetBot {
      display: none;
      position: relative;
      margin: 10% 11% 20px;
    }
}

　　

原文：https://www.cnblogs.com/lijie33402/p/4656838.html

转载于:https://www.cnblogs.com/dj258/p/10234375.html