vw和vh的响应网站，当屏幕太小时，尺寸保持不变大小（px）

我用vh和vw缩放完全制作了一个网站。现在，对于大屏幕，这使得它足够响应，但现在我想让它响应手机屏幕。在我的网站中，所有内容都在屏幕的中间60％以内。有形状，图像和文字。如果我使屏幕太小，我无法阅读文本，但仍然有40％的屏幕几乎是空白的（只有背景）。现在，当屏幕太窄时，我希望左右边缘（屏幕的空白部分）变小，内容不要变小。你能用vw和vh来做这个吗？还是我必须改变像素的一切？vw和vh的响应网站，当屏幕太小时，尺寸保持不变大小（px）

我尝试过，例如，当屏幕比500px窄但没有运气时，使主体200vw。

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

谢谢！

来源

2016-12-27 Nienke

显示一些代码！学习创建[mcve] –

有迹象表明，来到我的脑海三种解决方案：

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

1.断点： 所以，如果文档宽度为i，您希望将主容器元素的宽度设置为60％ s大于768px（例如，最大移动分辨率）。该代码将是：

.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，在一个细节在这个碎杂志的文章，这实际上是在排版最有趣的解释因为最常见的布局技术是我首先解释的技术。

希望我设法提供帮助。

来源

2016-12-27 14:00:28 Moo

vw和vh的响应网站，当屏幕太小时，尺寸保持不变大小（px）

回答

相关问题