如何給一個完全基於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網站最大化？

回答

相關問題