带有大众和VH的响应网站，当屏幕太小时，尺寸保持相同尺寸(PX)

Question

我完全用VH和大众缩放制作了一个网站。现在，对于大屏幕，这使其具有足够的响应速度，但是现在我想使其对移动屏幕的响应能力。在我的网站中，所有内容都在屏幕的60％中。有形状，图像和文本。如果我使屏幕太小，我再也无法阅读文本了，但是仍然有几乎空白的屏幕的40％（仅是背景）。现在，当屏幕太狭窄时，我希望左右边距（屏幕的空白部分）变得更小，并且内容不会变小。您能否使用大众和VH进行此操作，还是我必须用像素更改所有内容？

我已经尝试过这样的方法，例如，当屏幕窄时，将身体200VW缩小到500px时，但没有运气。

有人可以帮我吗？如果我不得不以像素为单位，因为我的元素的位置都是安静的复杂的，那真的很烂。

谢谢！

Answer 1

我想到三种解决方案：

1. 使用断点
2. 使用最小宽度＆amp;宽度组合
3. 流体布局

1。断点：因此，如果文档宽度大于768px（例如，最大移动分辨率），则要将主要容器元素的宽度设置为60％。代码将是：

.container {
    margin: 0 auto; // horizontally centering element
    background-color: pink; // just to see where the element is
}
// targeting mobile screen size:
@media only screen 
and (max-width: 768px)
and (-webkit-min-device-pixel-ratio: 2) {
    width: calc(100% - 30px);
}
// targeting larger screens
@media only screen 
and (min-width: 769px)
and (-webkit-min-device-pixel-ratio: 2) {
    width: 60vw;
}

2。最小宽度：可能是一个更容易的解决方案，但是如果您还具有其他用视口单元样式的子元素元素，您只需要确定什么是看起来不错的最小container宽度，并将其设置为min-width属性的值。

.container {
    margin: 0 auto; // horizontally centering element
    background-color: pink; // just to see where the element is
    width: 60vw;
    min-width: 320px;
}

---

也许第三，最先进的技术可以为您提供帮助，如果没有上述的话，是这种流体技术，在此粉碎杂志的帖子中详细解释了，这实际上是排版的情况下最有趣的，因为最常见的是布局的技术是我首先解释的一种。

希望我能提供帮助。