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

Posted 2023-03-06

【中文标题】在桌面、ipad、移动设备上显示不同元素的媒体查询

【英文标题】：media queries showing different elements on desktop, ipad, mobile

【发布时间】：2017-09-25 02:12:00

【问题描述】：

我需要在不同的屏幕尺寸（移动设备、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%;
  

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

【问题讨论】：

到目前为止，showDekstop 和 showTablet 的代码是什么？

【参考方案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 会与下面的其他查询发生冲突。

【讨论】：

我在台式机和平板电脑的代码中添加了，你知道为什么它不起作用吗？非常感谢@dippas