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 工作的肖像 - 横向屏幕尺寸

AND

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，为什么？

<强> WHY吗

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

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

1 个答案: