媒体查询：如何使用 css 媒体查询定位 1024 以下的所有横向设备

Question

如何使用 css 媒体查询定位低于 1024 的所有横向设备这应该仅适用于移动设备而不适用于桌面浏览器

Answer 1

你可以这样试试

@media only screen 
  and (min-device-width: 1024px)
  and (min-device-pixel-ratio : 2.0)
  and (orientation: landscape) {

  //styles here

}

Answer 2

在下面的媒体查询 CSS 将影响最大宽度为 1024 像素的设备。 这意味着屏幕宽度小于 1024px 的设备将受到此影响。

 @media screen and ( max-width :1024px) and (min-device-pixel-ratio : 2.0)
     and (orientation: landscape){
       .your_CSS_Class{

          //your styles

      }
    }

Answer 3

@media only screen 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

    //your styles

}