在桌面、ipad、移动设备上显示不同元素的媒体查询

Question

我需要在不同的屏幕尺寸（移动设备、ipad 和桌面）上显示不同的元素”

目前我有：

@media only screen and (min-width: 480px) {
  .showMobile {
    display: none;
    position: relative;
    width: 100%;
  }
}


@media only screen and (max-width: 480px) {

  .hideMobile {
    display: none;
  }

}

但我需要一个 showTablet 用于纵向 - 横向屏幕尺寸

与

a showDekstop 显示桌面屏幕尺寸的桌面视图。

但我似乎无法让这个工作......有人可以帮忙吗？

@media only screen and (min-device-width : 768px) and (max-device-width : 
1024px) {
  .showTablet {
    display: block;
    visibility: visible;
    position: relative;
    width: 100%;
  }
}
@media only screen and (min-width: 1024px)and (max-device-width : 2048px) {
  .showDesktop {
    display: block;
    visibility: visible;
    position: relative;
    width: 100%;
  }
}

这是我拥有的，但它不起作用

Answer 1

不要使用device，为什么？

为什么？

min/max-width

宽度媒体特征描述了渲染表面的宽度 输出设备（例如文档窗口的宽度，或 打印机上页框的宽度）。

min/max-device-width

判断输出设备是网格设备还是位图 设备。如果设备是基于网格的（例如 TTY 终端或 手机显示只有一种字体），值为1。否则为 零。

下面是你的完整代码：

@media only screen and (min-width: 1025px) and (max-width: 2048px) {
  .showDesktop {
    display: block;
    visibility: visible;
    position: relative;
    width: 100%;
  }
} 
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .showTablet {
    display: block;
    visibility: visible;
    position: relative;
    width: 100%;
  }
}    
@media only screen and (min-width: 481px) {
  .showMobile {
    display: none;
    position: relative;
    width: 100%;
  }
}        
@media only screen and (max-width: 480px) {    
  .hideMobile {
    display: none;
  }    
}

注意 看出区别了吗？ min-width:481px 因为拥有它 480px 会与下面的其他查询发生冲突。