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

【问题标题】：Media Queries: How to target all landscape devices below 1024 using css media query媒体查询：如何使用 css 媒体查询定位 1024 以下的所有横向设备
【发布时间】：2020-02-17 16:51:15
【问题描述】：

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

【问题讨论】：

标签： html css media-queries

【解决方案1】：

你可以这样试试

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

  //styles here

}

【讨论】：

我想定位除 ipad 和桌面浏览器之外的所有移动设备横向模式
立即检查并在此处进一步跟进以在此处定位特定设备studiopress.com/website-respond-mobile-devices

【解决方案2】：

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

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

          //your styles

      }
    }

【讨论】：

【解决方案3】：

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

    //your styles

}

【讨论】：