對頁面內容使用最小和最大高度寬度是一種很好的做法嗎？

我發現使用最小寬度，最大寬度，最小高度，最大高度和vw，vh度量我可以控制每個分辨率上元素的大小。對頁面內容使用最小和最大高度寬度是一種很好的做法嗎？

例如：

*{ 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
html,body{ 
    height: 100%; 
    min-height: 100%; 
} 
body{ 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    line-height: 18px; 
    color: #333; 
    background-color: #f4f6f7; 
} 
#container{ 
    background-color: #fff; 
    -moz-border-radius: 0.4vw; 
    -webkit-border-radius: 0.4vw; 
    border-radius: 0.4vw; 
    border: 0.1vw solid rgba(0,0,0,0.15); 
    -moz-box-shadow: 0.3vw 0.3vw 0.3vw rgba(0,0,0,0.05); 
    -webkit-box-shadow: 0.3vw 0.3vw 0.3vw rgba(0,0,0,0.05); 
    box-shadow: 0.3vw 0.3vw 0.3vw rgba(0,0,0,0.05); 
    width: 70vw; 
    min-width: 70vw; 
    max-width: 70vw; 
    min-height: 100vh; 
    margin-left: auto; 
    margin-right: auto; 
}

這個容器將視圖端口高度的100％，無論是大的還是小的用戶分辨率is.It的規模是如何發生的static.Same如果我做容器內容也是一樣。這不是一種反應？如果它在每個分辨率上看起來都一樣，那麼它應該是，我已經測試過它，它可以工作。但是這看起來太簡單了，它必須有點不對勁。

如果以這種方式工作是個好主意，我需要一些意見，如果不是，爲什麼？

來源

2015-04-17 Petru Lebada

您是否檢查當用戶的設備/窗口具有不同的寬高比或方向時會發生什麼？你會如何確定文字大小？或光柵圖像？視網膜屏幕如何？最小/最大高度/寬度只是工具箱中實現響應式佈局的一種工具，是的，您可以使用它來限制過度拉伸。不管這是好的做法，還是不是真的可以歸結爲它是否達到了你的目標。你需要爲16000像素寬屏幕的用戶提供服務嗎？ –

@LieRyan，我已經測試了它在不同的設備和不同的分辨率，從800x600到1920x1080，它看起來是一樣的。顯然800x600和1920x1080在寬高比方面有很大的區別，但我不認爲我可以做些什麼，並且它對圖像，表格，文本等也有效。 –

@Shikkediel，例如，將div設置爲80％的寬度使其成爲瀏覽器寬度的80％，但如果您添加的內嵌內容超過了它的大小，它會變得更大。在這種情況下，您應該使用最大寬度。如果你沒有足夠的內容div可以小於80％，然後你應該使用最小寬度。 –

完全取決於你想要做的事情。只有在不使用jQuery的情況下創建相對於屏幕大小的塊時，vh和vw措施纔有用。

最小和最大寬度選項主要用於動態塊。例如，要防止空塊崩潰，或者阻止包含大量內容的塊將設計元素拉伸超過其預期的大小。

來源

2015-04-17 12:30:26 Mentor

對頁面內容使用最小和最大高度寬度是一種很好的做法嗎？

回答

相關問題