移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小:
1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询),判断设备的dpr。
1 2 3 4 5 6 | @mixin 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" ); } } |
2.css样式中调用 bg-image 方法
1 2 3 4 5 6 7 | div{ width : 30px ; height : 20px ; background- size : 30px 20px ; background-repeat : no-repeat ; @include bg-image( 'special_1' ); } |
移动端 border 的 1px 问题:
1.为了方便通用,使用 mixin 定义一个函数。
1 2 3 4 5 6 7 8 9 10 11 12 | @mixin border -1px ($color) { position : relative ; &:after{ display : block ; position : absolute ; left : 0 ; bottom : 0 ; width : 100% ; border-top : 1px solid $color; content : ' ' ; } } |
2.对 伪类 :after 进行缩放,以适应不同 dpr 的手机。通过 @media (媒体查询),来确定 设备的 dpr。 为了方便调用,定义一个全局的 class (此处为 border-1px)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // 判断在不同dpr下的显示情况 @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 ); } } } |
3.html/css样式调用.
html:
1 2 3 4 5 6 7 8 9 10 11 | < div class="tab border-1px"> < div class="tab-item"> < a v-link="{path:'/goods'}">商品</ a > </ div > < div class="tab-item"> < a v-link="{path:'/ratings'}">评价</ a > </ div > < div class="tab-item"> < a v-link="{path:'/seller'}">商家</ a > </ div > </ div > |
css:
1 2 3 4 5 6 7 | .tab{ display : flex; width : 100% ; height : 40px ; line-height : 40px ; @include border -1px (rgba( 7 , 17 , 27 , 0.1 )); } |