Question

我有100％的高度和宽度容器，然后意味着如果任何屏幕的分辨率是100％，那么如果分辨率在我的位置设计中不兼容，那么容器内部的元素正在压缩，我希望有一个响应式容器，里面有响应元素，但元素不会压缩。（示例尝试调整stackoverflow网站的大小，元素仍然相同。）

这是我的示例代码：

＆＃13;

.container {
  height: 100%;
  width: 100%;
  background-color: gray;
}

h1 {
  text-align: center;
}

＆＃13;

<div class="container">
  <h1>Responsive Container</h1>
</div>

＆＃13;

Answer 1

我不确定实际需要什么，如果你想限制元素不响应高于或低于特定值，你需要在宽度小于/大于时将容器元素固定为固定的像素宽度比使用媒体查询的特定屏幕值。

参考CSS Media Queries

<强> CSS：

.container {
  height: 100%;
  width: 100%;
  background-color: gray;
}

h1 {
  text-align: center;
}

@media only screen and (max-width: 500px) {
  .container {
    width: 500px;
  }
}

在下面的JSFiddle中，您可以看到当屏幕宽度小于500px时，元素被设置为固定宽度（500px）。

JSFiddle Demo

整页响应容器

1 个答案: