- 相關(guān)推薦
瀏覽器亞像素渲染與小數(shù)位的取舍
在響應(yīng)式項(xiàng)目中，百分比的數(shù)值的應(yīng)用越來(lái)越多，比如柵格化布局、背景定位、內(nèi)邊距等。以往對(duì)于這種數(shù)值，我們大都是直接采用計(jì)算器計(jì)算出來(lái)的數(shù)值。但這種數(shù)值有時(shí)會(huì)很長(zhǎng)，特別是除不盡的數(shù)值如23.33333333%。下面是由百分網(wǎng)小編為大家整理的瀏覽器亞像素渲染與小數(shù)位的取舍，喜歡的可以收藏一下!了解更多詳情資訊，請(qǐng)關(guān)注應(yīng)屆畢業(yè)生考試網(wǎng)!
為了解決這個(gè)問(wèn)題，我們需要先了解瀏覽器是如何處理這些小數(shù)位的。對(duì)于小數(shù)位的處理，不同的瀏覽器有不同的處理方法，主要有三種：處理成整數(shù)、保留4位小數(shù)或保留15位小數(shù)�，F(xiàn)代瀏覽器基本支持保留小數(shù)位的處理。由于顯示器是由像素單元組成的，對(duì)于小于1像素的部分，是無(wú)法像像素級(jí)那樣精確地處理的，而是采用亞像素渲染的方式進(jìn)行處理(有興趣了解亞像素渲染，可查看這篇文章“Subpixel rendering”)。這里我們借用 Alex Kilgour 的實(shí)驗(yàn)頁(yè)面對(duì)常用的瀏覽器進(jìn)行測(cè)試，具體實(shí)驗(yàn)頁(yè)面見“帶小數(shù)位的百分比、像素測(cè)試頁(yè)面”。
一、測(cè)試實(shí)驗(yàn)
本次實(shí)驗(yàn)主要分為三組：
(一)第一組
第一組是測(cè)試頁(yè)面中的例子1，本組主要測(cè)試瀏覽器對(duì)百分比小數(shù)位的值是如何處理的，方法是設(shè)置兩個(gè)huge元素的百分比寬度為：
50.4234112897987342876343534543534635653654654645676756756756756756765%、
50.5697612897987865876343534543534635653654654645676756756756756756765%。
然后再重新獲取瀏覽器渲染后的百分比數(shù)值。
瀏覽器對(duì)百分比小數(shù)位的處理主要是保留2位、4位、13位或15位，為了測(cè)試是通過(guò)四舍五入還是截?cái)嗵幚�，第一個(gè)百分比的值在第3位、5位、14位小數(shù)位取小于5的值，而第二個(gè)則取大于5的值。
(二)第二組
第二組是測(cè)試頁(yè)面中的例子2，本組主要測(cè)試當(dāng)寬度的像素值有小于1像素的值，瀏覽器是如何處理的。方法是設(shè)置三個(gè)box元素的寬度值分別為：620.4px、620.5px、620.6px，然后再通過(guò)重新獲取瀏覽器渲染的寬度值。
(三)第三組
第三組是測(cè)試頁(yè)面中的例子3~6，本組主要測(cè)試設(shè)置了百分比寬度的box元素在瀏覽器渲染后的寬度值都保留了幾位小數(shù)位。
實(shí)驗(yàn)原理如下：
1、設(shè)置一個(gè)寬為1200px 或 5120px 的container元素
在柵格化布局中，1200px的頁(yè)面寬度是常見的寬度;而5120px是5K屏下的屏幕寬度，基本算是正常頁(yè)面的極限寬度了。選取這兩個(gè)值，可以測(cè)試在正常頁(yè)面寬度與極限頁(yè)面寬度時(shí)，瀏覽器的處理情況。
2、將子元素box的寬度設(shè)置成 50.423411289798736% 或 50.569761289798784%
3、計(jì)算container寬度與“原始百分比” 以及 “瀏覽器處理后的百分比” 各自相乘后的寬度值
4、直接獲取瀏覽器渲染出來(lái)后box元素的寬度值
以container寬為1200px、box的百分比寬度為50.423411289798736%為例。
(1)box的原始百分比就是 50.423411289798736%，那么通過(guò)這個(gè)百分比換算后的像素寬度值就是：1200 * 50.423411289798736% = 605.0809354775848px
(2)在Chrome瀏覽器中，box的百分比寬度最終會(huì)被四舍五入成50.4234%。通過(guò)這個(gè)百分比換算后的像素寬度值是：1200 * 50.4234% = 605.0808px
(3)而瀏覽器渲染后寬度是605.078125px。
我們將第一組的渲染結(jié)果填入“寬度的百分比保留的小數(shù)位”、第三組的渲染結(jié)果填入“渲染后的寬度值保留的小數(shù)位”，最終可以得出以下測(cè)試結(jié)果。
瀏覽器 寬度的百分比保留的小數(shù)位 渲染后的寬度值保留的小數(shù)位
從測(cè)試數(shù)據(jù)可以看出：
“寬度的百分比保留的小數(shù)位”方面，所有瀏覽器都支持小數(shù)位的百分比寬度值，其中最短為2位小數(shù)位，最長(zhǎng)為15位小數(shù)位。其中保留15位小數(shù)位的瀏覽器，在最后一位數(shù)字的取舍上有一定的偏差，并不是四舍五入的處理。不過(guò)最后一位數(shù)值對(duì)計(jì)算后的寬度值的影響很小，所以可以忽略。
如在Safari 10瀏覽器中，設(shè)置了width: 50.4234112897987342876343534543534635653654654645676756756756756756765%的huge元素，其百分比最后處理成50.423411289798736%。原百分比的15、16位小數(shù)是42，但Safari最后處理成6。
“渲染后的寬度值保留的小數(shù)位”方面，除了IE8、9外，其他的瀏覽器都支持保留小數(shù)位的寬度值，支持6位或13位小數(shù)。與百分比的取舍有點(diǎn)不同的是，亞像素渲染的寬度值的在取舍上存在著一定的偏差，不過(guò)偏差基本不大于0.01px。
如在Safari 10瀏覽器中，設(shè)置了50.569761289798784%的box元素，基于container計(jì)算的寬度是606.8371354775854px，而實(shí)際渲染后的寬度值是606.828125px。
二、百分比位數(shù)的取舍
瀏覽器的渲染情況已經(jīng)了解了，那小數(shù)位的位數(shù)上，我們又應(yīng)該如何取舍呢。在第二組實(shí)驗(yàn)中(如下面的圖1)，我們雖然設(shè)置了三個(gè)各自相差0.1px的元素，但在亞像素渲染中有所偏差，box2-1與box2-2相差0.109375px，而box2-3與box2-2相差0.09375px。前者的差距仔細(xì)看還是能看得出來(lái)，但后者的差距小于0.1px肉眼基本看不出來(lái)。因此，我們只要控制計(jì)算后的誤差小于0.1px即可。我們以5K屏的寬度5120作為寬度的極限值。那么可以得出以下結(jié)果：
0.1/5120*100 = 0.001953125
從這可以看出，只要保留3位小數(shù)，無(wú)論第4位以及后面的數(shù)值是哪個(gè)數(shù)，誤差范圍都不會(huì)超過(guò)0.1像素。
保留3位小數(shù)對(duì)于主流的瀏覽器是足夠的，但I(xiàn)E系列只能保留2位小數(shù)位。如果舍棄的百分?jǐn)?shù)是0.009999%的話，在極限范圍內(nèi)，其導(dǎo)致的誤差將是：
5120*0.009999/100 = 0.5119488
如果在舍棄前寬度是620.8119488，那舍棄后的寬度就是620.3。IE8、IE9對(duì)小于1像素的部分是會(huì)進(jìn)行取整處理的，因此舍棄前后的整數(shù)值是621和620，那將會(huì)出現(xiàn)1像素的誤差。對(duì)于IE8、IE9，我們無(wú)法避免出現(xiàn)1像素的誤差，因此我們?cè)谠O(shè)置百分比寬度或背景定位時(shí)，需能兼容1像素的誤差范圍。
三、結(jié)論
綜合以下情況，我們可以得出以下結(jié)論：
1、百分比數(shù)值只需保留3位小數(shù)即可
2、在兼容IE8、IE9的情況下，無(wú)法避免1像素的差距，因此百分比寬度或背景定位時(shí)，需能兼容1像素的誤差范圍。
【瀏覽器亞像素渲染與小數(shù)位的取舍】相關(guān)文章：
PS像素亮度的分析介紹07-04
PS怎樣保持像素的完美10-28
ps像素圖基本知識(shí)10-05
PS渲染濾鏡怎么使用05-22
網(wǎng)頁(yè)設(shè)計(jì)多少像素才合適10-26
瀏覽器內(nèi)核知識(shí)08-31
Photoshop渲染濾鏡制作螺旋紋理07-28
如何卸載360瀏覽器08-23
IE瀏覽器怎么升級(jí)07-16