筆記 ： 移動端1像素細線解決思路

標籤：play   100%   邊框   dev   裝置   自己   技術分享   png   例子   

　　最近一直在vue移動端項目，每次一開始就要解決border：1px的問題，參考了大牛的文章後自己總結下來當作筆記

　　參考 :

　　　　張鑫旭：http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

　　　　　　　　https://www.cnblogs.com/lunarorbitx/p/5287309.html

　　產生原因 : 　　

　　　　在Retina螢幕上(Retina是一種像素壓縮螢幕，把更多的像素壓縮到一塊螢幕裡達到為了更高的解析度,其解析度始終是其他螢幕的2倍)，所以1px的邊框在devicePixelRatio的retina屏上會顯示為2px。

　　解決方案 : 

　　　　1. 縮小像素值(例子只取devicePixelRatio為2的，其他為1.5和3的，只要devicePixelRatio值乘以border-width等於1即可)

 1 .border_1px { 2     display: block; 3     width:100%; 4     border-top:1px solid rgba(7,17,27,.1);   5 } 6  7 @media (min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 2) { 8    .border_1px { 
　　　　　　display: block; 9     　　width:100%;10     　　border-top:0.5px solid rgba(7,17,27,.1);
　　　　}11 }

 

 

 

　　

 

　　

筆記 ： 移動端1像素細線解決思路