CSS fluid布局缩放内容

Question

我有一个CSS问题，你也许能帮上忙。

我正在尝试建立一个‘流畅’布局的网站。

所有网站内容都将包含在包装器div中

当屏幕移开时，我希望包装器div与它的内容一起移开。

但是，当屏幕大小增加时，我希望包装器div保持最大大小。其目的是防止图像缩放超过其原始分辨率和文本格式的变化(一个段落可能会在非常大的屏幕上变成单行)

我可以将最大像素和百分比应用到包装器DIV吗？有没有更好的方法来实现这个目标？

.wrapper {
    margin: 0 auto; 
    max-width: 800px;
    width: 80%;
    background-color: #ffffff;
    border: 1px solid;
    height: 1000px;
    }

非常感谢，P

Answer 1

是的，你可以做到这一点，这是一个很好的实践。

Answer 2

我可以应用一个最大像素和百分比到包装器DIV吗？

是的，，你可以应用它

.wrapper {
    margin: 0 auto; 
    max-width: 800px;
    width: 80%;
    background-color: #ffffff;
    border: 1px solid;
    height: 1000px;
    }

width: 80%;表示屏幕宽度(或浏览器窗口)的80%，不会超过max-width: 800px;

CSS中的max-width属性用于设置指定元素的最大宽度。max-width属性重写width属性，但是min-width将始终重写max-width，无论是在声明中的width之前还是之后。