dpl, 全称是device pixel ratio ,表示设备的像素比
设备在移动端因为物理像素和理论像素的不同而产生了显示的差异, 随着科技的发展, 设备的物理像素与理论像素之比由之前的一比一变成了多比一, 其中比较典型的就是, iphone6的设备像素比是2:1, iphone6 plus是3:1
因为其显示的差异, 也造成了我们在电脑上做的页面, 在移动端出现了显示异常的情况
而在js的window对象中有一个属性专门用于表示设备我的像素比例, 名叫devicePixelRatio, 也就是说, 我们可以使用window.devicePixelRatio来显示出当前设备的物理像素和实际像素的比例.
也同样是因为这个问题, 催生了移动设备一像素的问题, 因为我们在电脑上设置1px, 导致在手机端显示为2px甚至更多, 在需要精细化控制设计图的情况下会使页面非常不美观
解决这个问题，主要思想是：使用伪元素设置1px的边框，然后使用媒体查询，根据dpr的大小，对边框进行缩放（scaleY）。详细代码如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <template>
<div id="app">
<div class="tab border-1px"> <!-- !!!!!!! -->
<div class="tab-items">
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-items">
<router-link to="/ratings">评价</router-link>
</div>
<div class="tab-items">
<router-link to="/seller">商店</router-link>
</div>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "./common/stylus/mixin.styl"
@import "./common/stylus/base.styl"
#app
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
border-1px(blue) /*!!!!!!*/
.tab-items
flex: 1
text-align: center
font-size: 14px
& > a
display: block
width: 100%
color: rgb(77, 85, 93)
&.router-link-active
color: rgb(240, 20, 20)
.seller
border-bottom: 1px solid blue /*用于对比，在移动端实际显示2px*/
</style>
|
看过滴滴打车的黄奕老师的vue开发饿了么教程的童鞋可以知道这就是初期构建的商家详情的spa单页骨架雏形哈哈
可以看到我们使用到了stylus中的mixin对移动端设备一像素问题的解决办法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| border-1px($color)
position: relative
&::after
position: absolute
left: 0
bottom: 0
width: 100%
content: ' '
border-top: 1px solid $color
//图片的mixin，根据图片的不同dpr进行适配下显示高清问题
bg-image($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")
|
针对边框一像素问题, 我们使用的是伪类结合子绝父相, 然后将伪类的边框使用css3的transition: scale来进行缩放从而达到效果的
这里的bg-image($url) 是负责处理图片在不同dpr下显示的问题，原来跟1像素边框问题差不多，不过这里不需要重做，只是根据不同的media query来调用不同的图片显示，而这些图片是需要放在相对应的文件夹的。
再来看一下base中的内容
1
2
3
4
5
6
7
8
9
10
11
12
| <!--根据媒体查询@media设置不同的缩放比例(transform 的 scale)来修复1像素边框的问题-->
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
|
这里的修复1像素边框问题会拆分为2个部分，一个部分是这里的base.styl里面处理缩放，另外一部分是在mixin.styl里面处理重做border。
这里是一个base模块文件，只保留了基本的共用的css，需要结合其他的css文件(stylus)来合并理解
dpr一般是1或者2，1.5只是为了更精细的去适配1和2之间的手机型号
