瀏覽器亞像素渲染與小數位的取舍
在響應式項目中，百分比的數值的應用越來越多，比如柵格化布局、背景定位、內邊距等。以往對于這種數值，我們大都是直接采用計算器計算出來的數值。但這種數值有時會很長，特別是除不盡的數值如23.33333333%。下面是由百分網小編為大家整理的瀏覽器亞像素渲染與小數位的取舍，喜歡的可以收藏一下!了解更多詳情資訊，請關注應屆畢業生考試網!
為了解決這個問題，我們需要先了解瀏覽器是如何處理這些小數位的。對于小數位的處理，不同的瀏覽器有不同的處理方法，主要有三種：處理成整數、保留4位小數或保留15位小數�，F代瀏覽器基本支持保留小數位的處理。由于顯示器是由像素單元組成的，對于小于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像素的誤差范圍。
【瀏覽器亞像素渲染與小數位的取舍】相關文章：
PS像素亮度的分析介紹07-04
PS怎樣保持像素的完美10-28
網頁設計多少像素才合適10-26
ps像素圖基本知識10-05
PS渲染濾鏡怎么使用05-22
瀏覽器內核知識08-31
Photoshop渲染濾鏡制作螺旋紋理07-28
提高CSS網頁渲染效率的技巧05-03
IE瀏覽器怎么升級07-16