Question

我曾经从Flash应用程序中看到过一种效果，该效果要使用CSS构建-当用户将浏览器窗口的大小调整到最小可视区域（例如小于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的新手，我也认为这太过分了

P.S。我只能使用IE11-不要问我为什么

Answer 1

您需要将assessment.findAll({ where: { id: assessmentId, is_active: true },include: [{ model: question, where : { is_active: true }, required: false, through: {attributes: []}, include: [{ model:tag, through: {attributes: []} }] }] }) CSS放在@media CSS之下。

.notice

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

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

对您有用或希望为您带来希望的希望。

CSS根据屏幕大小更改内容

2 个答案: