响应式移动和显示：none - Wordpress - Visual Composer

Question

你好，我在移动和平板设备上隐藏一行（完全是背景）时遇到问题我尝试将 class 给行：“none” 并添加 css 但是这不在手机上工作

@media screen and (max-device-width: 900px){
  .none {
    display: none !important;
    visibility: hidden !important;
}
}

@media screen and (max-device-width: 900px){
  .none {
    background-image: none !important;
}
}

Answer 1

您的代码应该适用于实际 phone/tablet。它在这些模拟器中不起作用，因为 max-device-width 指的是 设备宽度 ，而不是 iframe window 的宽度。在模拟器中，该设备是您的计算机，几乎可以肯定它的物理屏幕宽度大于 900px。因此，对于开发，请改用 max-width：

@media screen and (max-width: 900px){
  .none {
    display: none !important;
  }
}

@media screen and (max-width: 900px){
  .none {
    background-image: none !important;
  }
}

生产时，请随意使用 max-device-width。关于此的更多信息 here.

响应式移动和显示：none - Wordpress - Visual Composer

Resposive Mobile and display: none - Wordpress - Visual Composer

css

iphone

wordpress

responsive

visual-composer