在響應式項目中，百分比的數值的應用越來越多，比如柵格化佈局、背景定位、內邊距等。以往對於這種數值，我們大都是直接採用計算器計算出來的數值。但這種數值有時會很長，特別是除不盡的數值如23.33333333%。下面是由本站小編爲大家整理的瀏覽器亞像素渲染與小數位的取捨，喜歡的可以收藏一下!瞭解更多詳情資訊，請關注應屆畢業生考試網!
爲了解決這個問題，我們需要先了解瀏覽器是如何處理這些小數位的。對於小數位的處理，不同的瀏覽器有不同的處理方法，主要有三種：處理成整數、保留4位小數或保留15位小數。現代瀏覽器基本支持保留小數位的處理。由於顯示器是由像素單元組成的，對於小於1像素的部分，是無法像像素級那樣精確地處理的，而是採用亞像素渲染的方式進行處理(有興趣瞭解亞像素渲染，可查看這篇文章“Subpixel rendering”)。這裏我們借用 Alex Kilgour 的實驗頁面對常用的瀏覽器進行測試，具體實驗頁面見“帶小數位的百分比、像素測試頁面”。
一、測試實驗
本次實驗主要分爲三組：
(一)第一組
第一組是測試頁面中的例子1，本組主要測試瀏覽器對百分比小數位的值是如何處理的，方法是設置兩個huge元素的百分比寬度爲：
50.4234112897987342876343534543534635653654654645676756756756756756765%、
50.5697612897987865876343534543534635653654654645676756756756756756765%。
然後再重新獲取瀏覽器渲染後的百分比數值。
瀏覽器對百分比小數位的處理主要是保留2位、4位、13位或15位，爲了測試是通過四捨五入還是截斷處理，第一個百分比的值在第3位、5位、14位小數位取小於5的值，而第二個則取大於5的值。
(二)第二組
第二組是測試頁面中的例子2，本組主要測試當寬度的像素值有小於1像素的值，瀏覽器是如何處理的。方法是設置三個box元素的寬度值分別爲：620.4px、620.5px、620.6px，然後再通過重新獲取瀏覽器渲染的寬度值。
(三)第三組
第三組是測試頁面中的例子3~6，本組主要測試設置了百分比寬度的box元素在瀏覽器渲染後的寬度值都保留了幾位小數位。
實驗原理如下：
1、設置一個寬爲1200px 或 5120px 的container元素
在柵格化佈局中，1200px的頁面寬度是常見的寬度;而5120px是5K屏下的屏幕寬度，基本算是正常頁面的極限寬度了。選取這兩個值，可以測試在正常頁面寬度與極限頁面寬度時，瀏覽器的處理情況。
2、將子元素box的寬度設置成 50.423411289798736% 或 50.569761289798784%
3、計算container寬度與“原始百分比” 以及 “瀏覽器處理後的百分比” 各自相乘後的寬度值
4、直接獲取瀏覽器渲染出來後box元素的寬度值
以container寬爲1200px、box的百分比寬度爲50.423411289798736%爲例。
(1)box的原始百分比就是 50.423411289798736%，那麼通過這個百分比換算後的像素寬度值就是：1200 * 50.423411289798736% = 605.0809354775848px
(2)在Chrome瀏覽器中，box的百分比寬度最終會被四捨五入成50.4234%。通過這個百分比換算後的像素寬度值是：1200 * 50.4234% = 605.0808px
(3)而瀏覽器渲染後寬度是605.078125px。
我們將第一組的渲染結果填入“寬度的百分比保留的小數位”、第三組的渲染結果填入“渲染後的寬度值保留的`小數位”，最終可以得出以下測試結果。
瀏覽器 寬度的百分比保留的小數位 渲染後的寬度值保留的小數位
從測試數據可以看出：
“寬度的百分比保留的小數位”方面，所有瀏覽器都支持小數位的百分比寬度值，其中最短爲2位小數位，最長爲15位小數位。其中保留15位小數位的瀏覽器，在最後一位數字的取捨上有一定的偏差，並不是四捨五入的處理。不過最後一位數值對計算後的寬度值的影響很小，所以可以忽略。
如在Safari 10瀏覽器中，設置了width: 50.4234112897987342876343534543534635653654654645676756756756756756765%的huge元素，其百分比最後處理成50.423411289798736%。原百分比的15、16位小數是42，但Safari最後處理成6。
“渲染後的寬度值保留的小數位”方面，除了IE8、9外，其他的瀏覽器都支持保留小數位的寬度值，支持6位或13位小數。與百分比的取捨有點不同的是，亞像素渲染的寬度值的在取捨上存在着一定的偏差，不過偏差基本不大於0.01px。
如在Safari 10瀏覽器中，設置了50.569761289798784%的box元素，基於container計算的寬度是606.8371354775854px，而實際渲染後的寬度值是606.828125px。
二、百分比位數的取捨
瀏覽器的渲染情況已經瞭解了，那小數位的位數上，我們又應該如何取捨呢。在第二組實驗中(如下面的圖1)，我們雖然設置了三個各自相差0.1px的元素，但在亞像素渲染中有所偏差，box2-1與box2-2相差0.109375px，而box2-3與box2-2相差0.09375px。前者的差距仔細看還是能看得出來，但後者的差距小於0.1px肉眼基本看不出來。因此，我們只要控制計算後的誤差小於0.1px即可。我們以5K屏的寬度5120作爲寬度的極限值。那麼可以得出以下結果：
0.1/5120*100 = 0.001953125
從這可以看出，只要保留3位小數，無論第4位以及後面的數值是哪個數，誤差範圍都不會超過0.1像素。
保留3位小數對於主流的瀏覽器是足夠的，但IE系列只能保留2位小數位。如果捨棄的百分數是0.009999%的話，在極限範圍內，其導致的誤差將是：
5120*0.009999/100 = 0.5119488
如果在捨棄前寬度是620.8119488，那捨棄後的寬度就是620.3。IE8、IE9對小於1像素的部分是會進行取整處理的，因此捨棄前後的整數值是621和620，那將會出現1像素的誤差。對於IE8、IE9，我們無法避免出現1像素的誤差，因此我們在設置百分比寬度或背景定位時，需能兼容1像素的誤差範圍。
三、結論
綜合以下情況，我們可以得出以下結論：
1、百分比數值只需保留3位小數即可
2、在兼容IE8、IE9的情況下，無法避免1像素的差距，因此百分比寬度或背景定位時，需能兼容1像素的誤差範圍。
