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

aspec-ratio

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

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

device-aspect-ratio

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

这两个用于媒体查询能够解决许多宽高比例较大的安卓机器的适配问题。
好比这样:htm

/*宽屏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.htmlblog

相关文章
相关标签/搜索