HTML寬度百分比

#wrapper { 
     margin: 0 auto; 
     max-width: 1020px; 
     width: 98%; 
     background-color: #FEFBE8; 
     border: 2px solid #878E63; 
     border-radius: 2px; 
     box-shadow: 0 0 10px rgba(12,3,25,0.8); 
}

我在線學習本教程，它有一個div封裝器，它包裝了正文中包含的所有內容。所以：HTML寬度百分比

<body> 
<div id="wrapper"> 
... 
</div> 
</body>

這是一個製作響應式網站的教程。我有點困惑，爲什麼他包括最大寬度的包裝的CSS：1020px 和寬度：98％。那麼這是說，具有ID包裝的div元素將是1020px的98％？

來源

2015-12-06 CapturedTree

max-width - 最大寬度的元件可以達到
width所述元件的寬度

你的代碼表示#wrapper是要視口的98％，但它壽ld永遠不會超過1080px。如果窗口寬度的98％大於1020像素，則#wrapper不會變得更寬！

如果您不明白，請發表評論:)

來源

2015-12-06 01:37:08 www139

謝謝你的解釋！現在它更有意義。例如，如果瀏覽器窗口是1400像素。然後，包裝div元素將只覆蓋1372像素（1400的98％），但由於最大寬度設置爲1020像素，包裝div元素將只能達到1020像素。現在形成的差距將是190px（1400 - 1020）/ 2在包裝的兩邊，因爲我設置了邊距：0自動，這將中心我的包裝div元素？ – CapturedTree

@ 1290它應該告訴我會發生什麼情況並對結果發表評論:) – www139

@ ww139不知道我是否正確地做了這件事，但我檢查了我的MacBook Pro 13英寸顯示屏，並且顯示我的縮放分辨率看起來像1440x900。所以我將div元素的max-width屬性設置爲1280px，即使我的顯示寬度爲1440px，div元素也只佔用了1020px。所以我認爲最大寬度覆蓋了98％的寬度屬性，這是對包裝視圖的縮放比例。 – CapturedTree

width屬性是相對於瀏覽器窗口的寬度，但最大的設定，這確保了寬度不會超過1020px（在這種情況下），即使你的瀏覽器窗口被拉伸到超過1020px

來源

2015-12-06 01:36:24

感謝您的清理！現在有道理！ – CapturedTree

HTML寬度百分比

回答

相關問題