Question

我用vh和vw缩放完成了一个网站。现在，对于大屏幕，这使它具有足够的响应能力，但现在我想让它对移动屏幕做出响应。在我的网站中，所有内容都在屏幕中间的60％之内。有形状，图像和文字。如果我将屏幕设置得太小，我就无法阅读文本，但仍然有40％的屏幕几乎是空白的（只有背景）。现在，当屏幕太窄时，我希望左右边距（屏幕的空白部分）变小，内容不会变小。你能用vw和vh做到这一点还是我必须改变所有像素？

我已经尝试过这样做，例如当屏幕比500px更窄时使身体200vw，但没有运气。

任何人都可以帮助我吗？它真的很糟糕如果我不得不重新以像素为单位，因为我的元素的位置都很安静。

谢谢！

Answer 1

我想到了三种解决方案：

使用断点
使用min-width＆amp;宽度组合
流体布局

<强> 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;
}

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

希望我能帮到你。

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

1 个答案: