DPR
dpr問題是移動端web開發上需要注意的問題，用大白話說就是，代碼中所設置的像素值實際上是虛擬像素，手機屏幕上的像素實際為物理像素，原始的手機，虛擬像素與物理像素是1:1覆蓋的，但隨著移動端屏幕的技術發展，屏幕尺寸不變的情況下，密度卻增大了，就會出現邏輯1像素覆蓋了多個物理像素，就造成了不清晰的問題。
dpr（devicePixelRatio）就是即物理像素/邏輯像素
在美工切圖的時候需要切1倍、2倍、3倍圖，也是因為這個問題。而在移動web開發中，也需要根據不同屏幕做不同的處理，目的是盡可能讓邏輯像素與物理像素一一對應，這樣才能達到最清晰的狀態。
在js中可以獲取dpr的值
window.devicePixelRatio在css中解決dpr問題應使用媒體查詢
border 1像素問題
css中設置的1px，是虛擬像素，在移動屏上，drp是1的情況下，邊框是正好1:1覆蓋的，但在大于1的情況下，比如iPhone 6s上的drp是2，css的1像素實際上在屏幕上要覆蓋兩倍的物理像素，于是看上去就比較粗，如果拿原生APP去比，web就明顯粗一些，就是因為實際在物理屏上覆蓋了2像素的高度。
解決這個問題的思路是，根據媒體查詢，在不同dpr下，利用transform中的縮放，將Y軸縮放一定比例，盡量使虛擬像素與物理像素吻合。比如dpr是1.5，則Y軸縮放0.7（因為沒辦法設0.75），2的情況下縮放0.5，3的情況下縮放0.3。
html
<div id="vTabs" class="vTabs border-1px"></div>stylus
border-1px($color)position relative&::afterdisplay blockwidth 100%position absoluteleft 0bottom 0border-top 1px solid $colorcontent ' '@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5).border-1px&::aftertransform scaleY(0.7)-webkit-transform scaleY(0.7)@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2).border-1px&::aftertransform scaleY(0.5)-webkit-transform scaleY(0.5)@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3).border-1px&::aftertransform scaleY(0.3)-webkit-transform scaleY(0.3).vTabswidth 100%height 40pxline-height 40pxbackground #ffffffdisplay flexborder-1px(rgba(7,17,27,0.1))圖片適應
目前移動端屏的dpr基本都是2以上，我們一般考慮2和3的情況即可。
思路也是一樣的，利用媒體查詢不同屏幕上使用不同尺寸圖片，盡量使虛擬像素與物理像素吻合。
stylus mixin
background-img($url)background-image url($url+"@2x.png")@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)background-image url($url+"@3x.png")意思是，如果dpr大于等于3（3以上），則用3倍圖，否則均用2倍圖。當然這里要約定好圖片的命名。
css中應用
.icondisplay inline-blockvertical-align topwidth 30pxheight 18pxbackground-img('./img/brand')background-size 100% 100%background-repeat no-repeat張鑫旭大神的dpr解釋：
http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
)
