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

我一直在构建所见即所得的网站设计器,今天我有一些时间来整合媒体查询。

我有3个div设置, .mobile.tablet.desktop

该计划是如果浏览器为400px or lower以显示.mobile div,
400px600px以显示.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;
  }
}

===============>>#1 票数: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块移到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/

  ask by Michael Schwartz translate from so

未解决问题?本站智能推荐: