如何给一个完全基于css的vw-units的html网站最大化？

我建立了一个几乎每个元素都以vw-unit为单位获得大小的网站。因此，每个元素的文本，填充，边距，高度和宽度都设置为“vw”。这很好。如何给一个完全基于css的vw-units的html网站最大化？

我的问题是，应该有一个变化，现在该网站不应该扩大超过1200px宽度。这意味着，如果屏幕宽度超过1200像素，则网站不应填充宽度的100％，并且每个元素的宽度应与屏幕宽度为1200像素时的宽度相同。

当然，我有一个最大宽度为1200px的div，但里面的所有内容仍然随着屏幕的增长而增长。

我知道我可以使用1200px作为断点，并且我可以再次定义每个元素。但那是我想要避免的。

我的问题的意思是：有没有办法修改css单元“vw”的方式，它使用1200px作为基本宽度的每一个更宽的屏幕？

2014-10-07 mikeybarker

你有一个小提琴？ – APAD1 2014-10-07 15:47:10

我在这里做了一个简单的例子：http://jsfiddle.net/z4gcqg3b/更改scrren的宽度...除了容器之外的所有东西都在vw-units中。我想停止调整大屏幕的所有内部元素而不触及每个元素。 – mikeybarker 2014-10-08 07:58:43

如果您正在使用容器元素，则可以将其设置为max-width，这将不允许元素的宽度超过指定的数量。

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #faa; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 
#container { 
 
    background-color: #afa; 
 
    width: 60vw; 
 
    max-width: 200px; 
 
    margin: 0 auto; 
 
    padding: 10px; 
 
} 
 
#container p { 
 
    margin: 0; 
 
}

<div id="container"> 
 
    <p>This div's width can't go any further than 200 pixels.</p> 
 
</div>

来源

2014-10-07 17:34:01 SeinopSys

是的，但这不会改变任何事情，我必须为每个元素定义这些，这些都是很多的。另一方面，有很多填充，边距和字体大小没有最大宽度规格或类似的东西，或者我在这里错过了什么？ – mikeybarker 2014-10-08 07:48:56

如何给一个完全基于css的vw-units的html网站最大化？

回答

相关问题