摘要:在和一些安卓手機等的設備上,需要設置為,這個時候就是倍地畫了。
編者按:本文由人人網FED發表于掘金,并已授權奇舞周刊轉載
什么是像素?
像素是屏幕顯示最小的單位,在一個1080p的屏幕上,它的像素數量是1920 1080,即橫邊有1920個像素,而豎邊為1080個。一個像素就是一個單位色塊,是由rgba四個通道混合而成。對于一個1200萬像素的相機鏡頭來說,它有1200萬個感光單元,它能輸出的最大圖片分辨率大約為3000 ?4000。
那么像素本身有大小嗎,一個像素有多大?
有的,如果一個像素越小,那么在同樣大小的屏幕上,需要的像素點就越多,像素就越密集,如果一英寸有435個像素,那么它的dpi/ppi就達到了435。Macbook Pro 15寸的分辨率為2880 x 1800,15寸是指屏幕的對角線為15寸(具體為15.4),根據長寬比換算一下得到橫邊為13寸,所以ppi為2880 / 13 = 220 ppi. 像素越密集即ppi(pixel per inch)越高,那么屏幕看起來就越細膩越高清。
在Mac/Windows上可以設置屏幕顯示的分辨率,Mac默認為設備分辨率的一半,它的dpr = 2,即長和寬用2個像素表示1個像素,所以2880個物理像素點實際上只表示1440個邏輯像素:
那么我們的問題來了,怎么在高清屏上畫一條0.5px的邊呢?0.5px相當于高清屏物理像素的1px。這樣的目的是在高清屏上看起來會更細一點,效果會更好一點,例如更細的分隔線。
大漠在《再談Retina下1px的解決方案》已經討論過這個問題,這里我們再理一理思路。
理論上px的最小單位是1,但是會有幾個特例,高清屏的顯示就是一個特例。高清屏確實可以畫0.5px,對比效果如下:
如果我們直接設置0.5px,在不同的瀏覽器會有不同的表現,使用如下代碼:
??? ??? ????0.5px
???? ????1px
????
在PC上的不同瀏覽器上測試測試結果如下所示:
其中Chrome把0.5px四舍五入變成了1px,而firefox/safari能夠畫出半個像素的邊,并且Chrome會把小于0.5px的當成0,而Firefox會把不小于0.55px當成1px,Safari是把不小于0.75px當成1px,進一步在手機上觀察iOS的Chrome會畫出0.5px的邊,而安卓(5.0)原生瀏覽器是不行的。所以直接設置0.5px不同瀏覽器的差異比較大,并且我們看到不同系統的不同瀏覽器對小數點的px有不同的處理。所以如果我們把單位設置成小數的px包括寬高等,其實不太可靠,因為不同瀏覽器表現不一樣。
第二種能想到的方法是縮放,能否設置1px,然后scale 0.5呢,我們可以嘗試一下,如下代碼所示:
1px + scaleY(0.5)
效果如下圖所示:
我們發現Chrome/Safari都變虛了,只有Firefox比較完美看起來是實的而且還很細,效果和直接設置0.5px一樣。所以通過transform: scale會導致Chrome變虛了,而粗細幾乎沒有變化,所以這個效果不好。
我們還想到做移動端的時候還使用了rem做縮放,但實際上rem的縮放最后還是會轉化成px,所以和直接使用0.5px的方案是一樣的。
還有什么辦法呢?還可以用線性漸變linear-gradient,如下代碼所示:
linear-gradient(0deg, #fff, #000)
linear-gradient(0deg, #fff, #000)的意思是:漸變的角度從下往上,從白色#fff漸變到黑色#000,而且是線性的,在高清屏上,1px的邏輯像素代表的物理(設備)像素有2px,由于是線性漸變,所以第1個px只能是#fff,而剩下的那個像素只能是#000,這樣就達到了畫一半的目的。邏輯分析很完美,實際的效果又怎么樣呢,如下圖所示:
我們發現這種方法在各個流覽器上面都不完美,效果都是虛的,和完美的0.5px還是有差距。這個效果和scale 0.5的差不多,都是通過虛化線,讓人覺得變細了。
還有另外一種方法,使用box-shadow,如下代碼所示:
box-shadow: 0 0.5px 0 #000
設置box-shadow的第二個參數為0.5px,表示陰影垂直方向的偏移為0.5px,效果如下:
這個方法在Chrome和Firefox都非常完美,但是Safari不支持小于1px的boxshadow,所以完全沒顯示出來了。不過至少找到了一種方法能夠讓PC的Chrome顯示0.5px。
還可以使用SVG,利用SVG的1px還是物理像素的1px,不是高清屏的1px。如下代碼所示:
svg
設置background為一個svg文件,這個svg多帶帶拷出來是這樣的:
使用svg的line元素畫線,stroke表示描邊顏色,默認的寬度stroke-width="1",由于svg的1px是物理像素的px,相當于高清屏的0.5px,另外還可以使用svg的rect等元素進行繪制。在Chrome和Safari的效果如下:
這個方案也是很完美,但是在firefox掛了,究其原因是因為firefox的background-image如果是svg的話只支持命名的顏色,如"black"、"red"等,如果把上面代碼的svg里面的#000改成black的話就可以顯示出來,但是這樣就很不靈活了。否則只能把svg轉成base64的形式,我們把svg的內容轉成base64(可以找一些在線的工具),對比如下:
.hr.svg?{ ????background:?url("data:image/svg+xml;utf-8,"); ????background:?url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg=="); }
這樣在firefox也能完美展示了。
其實0.5px的需求在移動端應該會更常見,比較一下以上五種方法在IOS和安卓的表現,如下圖所示:
IOS下的Safari和Chrome表現一致,都是以直接設置0.5px的效果最好,而安卓瀏覽器則是以box-shadow的效果最好(試了5和7),而svg的方案在IOS和安卓的設備上都能完美支持。讀者可以打開這個網頁,看一下在你的設備是哪種效果最好。
結合以上,我們初步得到以下結論:
使用SVG相對于box-shadow等方法,還有一個好處是可以借助svg的元素畫出任意圖形,如四邊形,圓角等。
最后還有一個萬能的方法,那就是通過控制viewport,在移端開發里面一般會把viewport的scale設置成1:
其中width=device-width表示將viewport視窗的寬度調整為設備的寬度,這個寬度通常是指物理上寬度。默認的縮放比例為1,如iphone 6豎屏的寬度為750px,它的dpr=2,用2px表示1px,這樣設置之后viewport的寬度就變成375px。這時候0.5px的邊就使用我們上面討論的方法。
但是你可以把scale改成0.5:
這樣的話,viewport的寬度就是原本的750px,所以1個px還是1px,正常畫就行,但這樣也意味著UI需要按2倍圖的出,整體面面的單位都會放大一倍。
在iPhone X和一些安卓手機等dpr = 3的設備上,需要設置scale為0.333333,這個時候就是3倍地畫了。
綜上討論了像素和viewport的一些概念,并介紹和比較了在高清屏上畫0.5px的幾種方法——可以通過直接設置寬高border為0.5px、設置box-shadow的垂直方向的偏移量為0.5px、借助線性漸變linear-gradient、使用transform: scaleY(0.5)的方法,使用SVG的方法。最后發現SVG的方法兼容性和效果都是最好的,所以在viewport是1的情況下,可以使用SVG畫0.5px,而如果viewport的縮放比例不是1的話,那么直接畫1px即可。
關于奇舞周刊
《奇舞周刊》是360公司專業前端團隊「奇舞團」運營的前端技術社區。關注公眾號后,直接發送鏈接到后臺即可給我們投稿。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54530.html
摘要:在和一些安卓手機等的設備上,需要設置為,這個時候就是倍地畫了。 編者按:本文由人人網FED發表于掘金,并已授權奇舞周刊轉載 什么是像素? 像素是屏幕顯示最小的單位,在一個1080p的屏幕上,它的像素數量是1920 1080,即橫邊有1920個像素,而豎邊為1080個。一個像素就是一個單位色塊,是由rgba四個通道混合而成。對于一個1200萬像素的相機鏡頭來說,它有1200萬個感光單元...
摘要:今天想寫的問題來自于網易一面的時候,面試官問我如何在移動端的頁面上畫一條的線。上面的結論我在端谷歌瀏覽器的設備模擬器里證實了有效,但是安卓和真機并沒有試過。 起因 最近一個月都在準備校招,所以沒什么時間寫博客。今天想寫的問題來自于網易一面的時候,面試官問我如何在移動端的頁面上畫一條1px的線。這個問題我模糊地記得之前看過相關文章,但是我清楚地記得當時自己腦子一片空白。是的,一面掛了,但...
摘要:常見優化方案模糊問題旋轉效果離屏自定義圖片尺寸實踐離屏旋轉效果實踐旋轉的雪花更新關于模糊問題前幾天研究的時候剛好趕上作者發布新版本,發現新版本截屏出來的效果比我對舊版本處理后畫布尺寸都設為倍的效果更好。 canvas常見優化方案——模糊問題、旋轉效果、離屏、自定義圖片尺寸 實踐demo——canvas離屏、旋轉效果實踐——旋轉的雪花 2017-12-18 16:27:35更新關于模糊問...
閱讀 2397·2021-10-09 09:44
閱讀 2132·2021-10-08 10:05
閱讀 3424·2021-07-26 23:38
閱讀 2991·2019-08-28 18:16
閱讀 812·2019-08-26 11:55
閱讀 1821·2019-08-23 18:29
閱讀 2035·2019-08-23 18:05
閱讀 1364·2019-08-23 17:02