本文主要是介绍移动1像素的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
问题:一般在移动端,由于dpr(设备像素比)不为1,在PC端显示1像素的边框,在移动端其实显示为2px。解决这个问题,主要思想是:使用伪元素设置1px的边框,然后使用媒体查询,根据dpr的大小,对边框进行缩放(scaleY)。详细代码如下所示:
App.vue:
<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.tabdisplay: flexwidth: 100%height: 40pxline-height: 40pxborder-1px(blue) /*!!!!!!*/.tab-itemsflex: 1text-align: centerfont-size: 14px& > adisplay: blockwidth: 100%color: rgb(77, 85, 93)&.router-link-activecolor: rgb(240, 20, 20).sellerborder-bottom: 1px solid blue /*用于对比,在移动端实际显示2px*/
</style>
mixin.styl:
border-1px($color)position: relative&::afterposition: absoluteleft: 0bottom: 0width: 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")
- 这里的
border-1px($color)
就是真正处理1像素边框问题的关键,通过伪元素after重做border,并且支持传入颜色变量$color
来自定义颜色。 - 这里的
bg-image($url)
是负责处理图片在不同dpr下显示的问题,原来跟1像素边框问题差不多,不过这里不需要重做,只是根据不同的media query来调用不同的图片显示,而这些图片是需要放在相对应的文件夹的。
base.styl: 进行缩放
<!--这里是对于使用reset.css之后的一些自定义的默认的css初始化-->
<!--设置一些移动端比较流行的字体-->
<!--其他都是为了方便开发,避免css的属性继承影响模块的代码-->
body, htmlline-height: 1font-weight: 200font-family: 'PingFang SC', 'STHeitiSc-Light', 'Helvetica-Light', Arial, sans-serif<!--根据媒体查询@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之间的手机型号
参考:https://segmentfault.com/a/1190000009279775
这篇关于移动1像素的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!