@media only屏幕查询无效

Question

我正在this网站上工作。我添加了以下代码，以便在有人在移动设备上打开时隐藏底部菜单

@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
.footer-p-1{
    display:none;
}
}

/* Portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
.footer-p-1{
    display:none;
}
}

/* Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {
.footer-p-1{
    display:none;
}

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
.footer-p-1{
    display:none;
}

}

出于某种原因，css不起作用。请指导我哪里错了？ 谢谢

Answer 1

<强>问题：

浏览器当前将您的CSS输出为：

-webkit-min-device-pixel-ratio无效，因为w3.org CSS验证器输出：

<强>解决方案：

-webkit-min-device-pixel-ratio已弃用，需要转换为min-resolution

您需要取消修正媒体查询条件：

Unprefix Webkit device pixel ratio

Answer 2

我认为您不能定义Min-max，但是如果您想将其隐藏在移动设备上，例如widt＆lt; 800px尝试这个：

@media (max-width: 800px) {
   .footer-p-1{
       display:none;
   }
}

评论对方并尝试使用此