CSS根据屏幕大小更改内容

Question

有一次，我从一个使用CSS构建的Flash应用程序中看到了一个效果:当用户调整浏览器窗口的大小，使其超出最小可查看区域(例如小于500x800 px)时，将内容替换为一条消息，说明可视屏幕大小太小。

我尝试了@media指令，它能够隐藏原始的显示内容，但是我无法用消息替换它

@media screen and (max-width:900px), screen and (max-height:500px) {
    .wrapper { display: none !important; }
    .notice  { display: block; visibility: visible; }
}

.notice {
  display: none;
  visibility: hidden;
}

编辑:添加HTML代码

<body>
<div class="wrapper">
   <header class="header">My header</header>
   <aside class="sidebar">Sidebar</aside>
   <article class="content">
   <h1>2 column, header and footer</h1>
      <p>This example uses line-based positioning, to position the header
         and footer, stretching them across the grid.</p>
   </article>
   <footer class="footer">My footer</footer>
</div>
<div class="notice">notice</div>
</body>

当我将浏览器窗口的大小调整到给定大小之后，CSS中的上述代码可以隐藏div包装器，但无法显示通知div。当屏幕尺寸为预期尺寸时，应隐藏div通知。

在这里，我不想考虑任何CSS框架。主要是因为我刚接触过CSS，而且我也认为这是过头了。

我只能用IE11 -别问我为什么

Answer 1

您需要将@media css放在.notice css下面。

<div class="wrapper">
  i am wrapper
</div>
<div class="notice">
  i am notice
</div>

.notice {
  display: none;
  visibility: hidden;
}

@media screen and (max-width:900px), screen and (max-height:500px) {
    .wrapper { display: none !important; }
    .notice  { display: block; visibility: visible; }
}

Answer 2

假设您的HTML如下所示：

<div class="wrapper">
     <div class="content">
          <--Your content-->
     </div>
     <div class="notice">
          viewable screen size is too small
      </div>
</div>

您可以添加以下css。

// Show content for bigger viewpoints
@media screen and (min-width:900px), screen and (min-height:500px) {
.wrapper.content {display:block;}
.wrapper.notice {display:none;}
}

// Show notice for smaller viewpoints
@media screen and (max-width:900px), screen and (max-height:500px) {
.wrapper.content {display:none;}
.wrapper.notice {display:block;}
}

希望对你有用，或者给你一个洞察力。