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

Posted 2023-03-06

【中文标题】具有 vw 和 vh 的响应式网站，当屏幕太小时，尺寸保持相同的尺寸 (px)

【英文标题】：responsive website with vw and vh, size staying the same size (px) when screen too small

【发布时间】：2017-05-11 19:01:08

【问题描述】：

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

我已经尝试过，例如当屏幕窄于 500 像素时将主体设置为 200vw，但没有运气。

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

谢谢！

【问题讨论】：

显示一些代码！学习创建minimal reproducible example

【参考方案1】：

我想到了三个解决方案：

使用断点 使用最小宽度和宽度组合 流体布局

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。最小宽度： 可能是一个更简单的解决方案，但如果您还有其他元素的子元素样式使用视口单位，那么就不是那么好，您只需要确定看起来没问题的最小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 杂志的帖子中有详细解释，这实际上是排版案例中最有趣的，因为最布局的常用技术是我首先解释的。

希望我能提供帮助。