Question

我一直在建立一个WYSIWYG网站设计师，今天我有时间整合媒体查询。

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

该计划是指浏览器400px or lower显示.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

使用max-width的媒体查询时，应始终在较低值之上包含较大的值，因为您希望较小的宽度覆盖较大的宽度。

/* 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块移到400块以上。

/* 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 */
}

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

以下是一个快速示例http://jsfiddle.net/4xaFe/

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

1 个答案: