国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

怎么畫一條0.5px的邊

G9YH / 3428人閱讀

摘要：在和一些安卓手機等的設備上，需要設置為，這個時候就是倍地畫了。

編者按：本文由人人網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/115902.html

相關文章

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<