android - 具有 vw 和 vh 的响应式网站，屏幕太小时尺寸保持相同尺寸(px)

Question

我制作了一个完全使用 vh 和 vw 缩放的网站。现在，对于大屏幕，这使其具有足够的响应能力，但现在我想让它对移动屏幕具有响应能力。在我的网站中，所有内容都在屏幕中间 60% 的范围内。有形状、图像和文字。如果我将屏幕设置得太小，我将无法再阅读文本，但仍有 40% 的屏幕几乎是空白的(只有背景)。现在，当屏幕太窄时，我希望左右边距(屏幕的空白部分)变小，并且内容不要变小。您是否仍然可以使用 vw 和 vh 来执行此操作，还是我必须以像素为单位更改所有内容？

我已经尝试过了，例如当屏幕窄于 500px 时将 body 设置为 200vw，但没有成功。

谁能帮帮我？如果我不得不以像素为单位重新制作它，那真的很糟糕，因为我的元素的位置都很复杂。

谢谢!

Answer 1

我想到了三种解决方案:

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

<强>1。断点:因此，如果文档宽度大于 768 像素(例如，最大移动分辨率)，您希望将主容器元素的宽度设置为 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。 Min-width: 可能是一个更简单的解决方案，但如果您还有其他使用视口(viewport)单位设置样式的元素子元素，则效果不佳，您只需要确定最小 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;
}

---

也许第三个，如果以上都不能的话，最先进的技术可以帮助你，这是Fluid technique , 在这个 Smashing 杂志的帖子中有详细解释，这实际上是排版案例中最有趣的，因为最常见的布局技术是我首先解释的。

希望我能帮上忙。