【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

相關文章
相關標籤/搜索