时间戳

首页 > 解决方案 > CSS 根据屏幕大小更改内容

html - CSS 根据屏幕大小更改内容

问题描述

我曾经从我想使用 CSS 构建的 Flash 应用程序中看到一个效果 - 当用户将浏览器窗口的大小调整到超出最小可视区域（例如小于 500x800 像素）时，将内容替换为一条消息，指出可视屏幕大小太小

我尝试了能够隐藏原始显示内容的@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>

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

在这一点上，我不想考虑任何 CSS 框架。主要是因为我是 CSS 新手，而且我也认为这有点矫枉过正

PS 我只能使用 IE11 - 不要问我为什么

标签： htmlcss

解决方案

你需要把那个@mediacss放在css下面.notice。

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

推荐阅读