Question

我必须将不同的属性应用于HDPI和MDPI屏幕的元素。我尝试了以下代码，但它仅适用于HDPI而不适用于MDPI。

@media screen and (min-width: 900px) {
  .myClass {
    margin-left: 34%;
  }
}
@media screen and (max-width: 899px) and (min-width: 500px) {
  .myClass {
    margin-left: 43%;
  }
}

这里媒体屏幕min-width 990px（HDPI）正在工作，但对于其他它不起作用。我该怎么办？

Answer 1

/* (ldpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:.75){
  /* CSS  */
}

/* (mdpi) Android*/
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {
  /* CSS  */
}

/* (hdpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:1.5){
  /* CSS  */
}

Reference 1

Reference 2

HDPI和MDPI笔记本电脑屏幕的媒体查询无效

1 个答案: