如何在 CSS 中使用媒体查询定义高度响应答案

【问题标题】：How to define height responsiveness using media query in CSS如何在 CSS 中使用媒体查询定义高度响应
【发布时间】：2017-03-25 06:21:00
【问题描述】：

我正在使用 CSS 媒体查询（不使用任何框架，如 bootstrap、foundation 等）构建响应式网站。好吧，该网站在宽屏幕分辨率 1366*768 上运行良好，但是当我以 1280*1024 等屏幕分辨率打开网页时，页面下方留下了很多空间。另外，我将每个部分的高度定义为 100vh。

适用于屏幕分辨率 1366*768

适用于屏幕分辨率 1280*1024

如何显示内容以覆盖页面的整个高度，以消除高度大于 768px 的屏幕的空白？

【问题讨论】：

这取决于。你想scale the text larger，还是缩小文本列，或者只是vertically center文本块？
发布您的一些 HTML+CSS，以便我们可以告诉您一些前进的方向......到目前为止我可以说的是，您可能有固定高度的内容，并且您需要以 % 为单位使用高度
@DineiRockenbach 我将每个部分的高度定义为 100vh，因为我想显示每个部分以填满整个屏幕。
@Shashank 我的错，我没有在图片之前阅读您的vh 提及。但是，我仍然认为基于真实代码提出改进建议会更容易。
@Shashank 另外，100vh = 100%，所以如果您“将每个部分的高度定义为 100vh”，您可能会遇到问题。没有看到代码就无法确定。

标签： html css media-queries

【解决方案1】：

如果您想将内容缩放到特定高度，您可以使用transform: scale(); 和max-height: 的媒体查询

首先是 HTML

<div class="wrapper">
        <div class="main">
            <h2>Hi my name is Shashank</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
        </div>
</div>

然后是 CSS

html, body {
  background: #333;
  padding: 0px;
  margin: 0px;
  color: #222222;
  height: 100%;
  width:100%;
  display: table;
}
.wrapper {
  margin: 0 auto;
  position: relative;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}
.main {
  -moz-border-radius: 6px / 6px;
  -webkit-border-radius: 6px 6px;
  border-radius: 6px / 6px;
  padding: 20px;
  background: #4694e8;
  width:300px;
  margin: auto;
  transition: 0.3s;
}
/* When height is 400 or less scale the content to 0.7 */
@media screen and (max-height: 400px) {  
  body {
    background: #444;
  }
  .main {
    -ms-transform: scale(0.7, 0.7);
    -webkit-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7);
  }
}
/* When height is 500 or more scale the content to 1.3 */
@media screen and (min-height: 500px) {  
  body {
    background: #222222;
  }
  .main {
    -ms-transform: scale(1.3, 1.3);
    -webkit-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
  }
}

我还建议在 html 和 body 标签中使用 display:table 和 display: table-cell 在包装器 div 中使用 vertical-align: middle 将内容居中

这是一个演示：https://jsfiddle.net/da2ds0nj/2/

我希望这对你有帮助，请原谅我的英语。

【讨论】：

谢谢，这也很有帮助。

【解决方案2】：

最简单的解决方案是使用flexbox - 你也会得到good coverage。

.container {
    display: flex;
    align-items: center;
}

类似的东西

<div class="container">
    <div><!-- content --></div>
</div>

编辑：这是为了使内容垂直居中 - 我可能误解了您要完成的工作。

如果你想让内容垂直填满空间，你可以试试这样的：

.container {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
}

并将其与子代上的flex-basis 结合起来，为您想要变大的子代定义基线。可以在 here 找到一个很好的 flex 资源。

【讨论】：

【解决方案3】：

你不能将内容设置为填充百分比高度而不是设置数字，如下所示：

content {
height: 70%;
}

【讨论】：