移動web開發DRP問題

dpr問題是移動端web開發上需要注意的問題，用大白話說就是，**中所設定的畫素值實際上是虛擬畫素，手機螢幕上的畫素實際為物理畫素，原始的手機，虛擬畫素與物理畫素是1:1覆蓋的，但隨著移動端螢幕的技術發展，螢幕尺寸不變的情況下，密度卻增大了，就會出現邏輯1畫素覆蓋了多個物理畫素，就造成了不清晰的問題。

dpr（devicepixelratio）就是即物理畫素/邏輯畫素

在美工切圖的時候需要切1倍、2倍、3倍圖，也是因為這個問題。而在移動web開發中，也需要根據不同螢幕做不同的處理，目的是盡可能讓邏輯畫素與物理畫素一一對應，這樣才能達到最清晰的狀態。

window.devicepixelratio

html

id="vtabs"

class="vtabs border-1px">

div>

stylus

border-

1px($color)
position relative
&::after
display block
width 100
%    position absolute
left 0
bottom 0
border-top
1px solid $color
content ' '
@media (-webkit
-min
-device
-pixel
-ratio: 1.5),(min
-device
-pixel
-ratio: 1.5)
.border-
1px    &
::after
transform scaley(0.7)
-webkit
-transform scaley(0.7)
@media (-webkit
-min
-device
-pixel
-ratio: 2),(min
-device
-pixel
-ratio: 2)
.border-
1px    &
::after
transform scaley(0.5)
-webkit
-transform scaley(0.5)
@media (-webkit
-min
-device
-pixel
-ratio: 3),(min
-device
-pixel
-ratio: 3)
.border-
1px    &
::after
transform scaley(0.3)
-webkit
-transform scaley(0.3)
.vtabs
width 100
%  height 40px
line-height
40px
background #ffffff
display flex
border-
1px(rgba(7,17,27,0.1))

思路也是一樣的，利用**查詢不同螢幕上使用不同尺寸，盡量使虛擬畫素與物理畫素吻合。

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")

css中應用

.icon

display
inline-block
vertical-align
topwidth 30px
height 18px
background-img('./img/brand')
background-size 100% 100%
background-repeat
no-repeat

張鑫旭大神的dpr解釋：

移動web開發

1.為什麼去學習移動web？已經從趨勢變成了乙個主流了，網際網路的流量入口已經大於pc端的流量入口2.相容性在國內的移動web瀏覽器，絕大部分都是基於webkit核心的，所以一些css3效果，h5的新特性絕大部分都被支援，需要新增字首。不同機型之間可能會略有不同，這個需要踩坑 在移動端，做動畫一律用...

移動web開發1

學習了viewport視口及相應的屬性 viewport 視口屬性 該屬性只在移動端瀏覽器上才有用。name viewport 告訴瀏覽器 我這個meta標籤設定的是viewport屬性 content設定的是屬性的值 屬性名不能亂寫 有固定的取值 width 寬度 device width 裝置的...

移動端web開發

viewport content width device width,user scalable no,initial scale 1.0,maximum scale 1.0,minimum scale 1.0 width 設定視口寬度 initial scale 初始化縮放比，大於0的數字 ma...