瀏覽器縮小頁面佈局

我在瀏覽器中縮小頁面時遇到了問題。瀏覽器縮小頁面佈局

這是一個簡單的頁面，主體寬度爲970px，分爲左右兩部分。左邊一個是300px，左邊浮動，右邊距10px，右邊一個是660px，向右浮動。這是確定的，當我放大或縮小。

但是當我將左側寬度更改爲298px，並將右側寬度添加到658px時，兩個部分都添加了1px邊框，雖然在正常尺寸下沒問題，但是當我縮小（按Ctrl +鼠標輪下來）至90％右邊部分下拉並打破布局。你可以在這裏看到的細節：jsfiddle

<body> 
    <style> 
    </style> 
    <div id='left'>left</div> 
    <div id='right'>right</div> 
</body>

來源

2013-11-25 YuC

使用百分比單位（或任何相對單位）來確保從瀏覽器縮放時的保真度。嘗試30％和70％。 – Anthony

此外，爲了在不調整截面寬度的情況下爲邊框設置像素單位，請設置'box-sizing：border-box'，以便在div的寬度內繪製邊框，而不是在外部繪製邊框。 – Anthony

HTML不喜歡與小數像素數的工作，這就是當你放大究竟發生了什麼 - 所有的像素尺寸得到內部分裂或乘（雖然乘法不真的是一個問題）。

想一想，它應該如何代表268.2像素？它變圓。所以如果你有許多不可分解的元素，你肯定會失去一些像素並導致佈局中斷。另外，這就是爲什麼一些縮放比例比其他縮放比例更好。

來源

2013-11-25 02:55:11 Shomz

但當我刪除邊框，並將左寬度設置爲300px，右寬度爲660px，並將左側的頁邊距左側設置爲10px時，無論您如何縮放，頁面佈局都不會中斷。爲什麼在這種情況下頁面佈局不會中斷？ – YuC

瀏覽器可能會始終保持邊框，因爲它不能小於1px，所以它保持1px。當所有其他元素縮小時，子元素寬度的總和變得比容器元素寬度大（由於邊界和不可分的數字舍入），導致右側元素沒有足夠的空間並將其移動到新行。看看當你對數字進行「正常化」時會發生什麼：http://jsfiddle.net/zSw6r/2/ – Shomz

爲了讓您的佈局具有一定的靈活性，請使用您的div的百分比寬度，並按照以前的答案建議的左右浮動，但不要設置保證金。允許邊距成爲剩餘空間。使用完全相同的寬度或百分比值加起來100％，由於Shomz解釋的原因，佈局會在一個或多個瀏覽器中中斷。

#left{ 
    float:left; 
    width:30%; 
} 

#right{ 
    float:right; 
    width:65%;

這兩個元素之間的空間將與5％的保證金相同，並且不太可能中斷。

來源

2013-11-25 03:20:57 otherDewi

瀏覽器縮小頁面佈局

回答

相關問題