css - 媒体查询通过最大宽度隐藏 DIV

Question

http://jsbin.com/regovusu/1/edit

我一直在构建一个 WYSIWYG 网站设计器，今天我有一些时间来合并媒体查询。

我有 3 个 div 设置，.mobile、.tablet 和 .desktop。

计划是如果浏览器400px 或更低 显示.mobile div，
400px 到 600px 显示 .tablet,
和 600px + 显示 .desktop

我不确定为什么没有响应。

非常感谢任何帮助。

CSS:

body {
  margin: 0;
  padding: 0;
}

.mobile, .tablet {
  display: none;
}

@media all and (max-width:400px) { 
  .tablet, .desktop {
    display: none;
  }
}

@media all and (max-width:600px) { 
  .mobile, .desktop {
    display: none;
  }
}

Answer 1

当您使用具有最大宽度的媒体查询时，您应该始终将较大的值包含在较小的值之上，因为您希望较小的宽度覆盖较大的宽度。

/* common rules always active */

@media all and (max-width:400px) { 
    /* this will only shows when the max width is 400 */
}

@media all and (max-width:600px) {
    /* this will only show when the max width is 600,
    but it will override the 400 view  because when the
    max width is 600, it is always greater than 400 */
}

为避免此问题，您需要将 600 block 移动到 400 block 上方。

/* common rules always active */

@media all and (max-width:600px) {

}

@media all and (max-width:400px) { 
    /* now the 400 block will override the 600 view
    when the max width is less than 400 */
}

第二部分是您需要在移动设备和平板电脑 View 中重置显示属性。例如显示: block

这是一个简单的例子 http://jsfiddle.net/4xaFe/