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

我一直在打造一个所见即所得的网站设计师，今天我花了一些时间整合媒体查询

我有3个div设置，

.mobile

、

.tablet

和

.desktop

如果浏览器为

400px或更低版本

，则计划显示

.mobile

div，

400px

至

600px

显示

。平板电脑

，
和

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;
  }
}

---

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

/* 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属性。e、 g.

显示：块

下面是一个简单的例子