移动端设置border的1px像素解决方案

可能有人会问，设置边框1px问题，直接 border:1px soild #ccc; 不就完事了，为什么需要这么麻烦？
因为移动端的dpr设备像素比不同，直接设置会出现边框加粗问题，亲们可以自行测试，这里不做过多阐述。
下面直接上解决方案。

1.为了方便通用，在 base.scss 文件中使用 mixin 定义一个函数。（mixin是sass定义函数的关键字）

@mixin border-1px($color) {position: relative;// 添加伪类&:after{display: block;position: absolute;left: 0;bottom: 0;height: 1px;width: 100%;border-top: 10px solid $color;content: '';}
}

2.页面使用函数

<style lang="scss" rel="stylesheet/scss" scoped>
/**导入base.scss文件**/
@import '../assets/css/base.scss';
.tab {display: flex;@include border-1px(red);.tab-item {/**...这里的样式不重要,省略先...**/}
}
</style>

3.在 base.scss 文件中写。对伪类 :after 进行缩放，以适应不同 dpr 的手机。通过 @media (媒体查询)，来确定设备的 dpr。为了方便调用，定义一个全局的 class (此处为 border-1px)；

/*判断在不同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);}}
}

4.页面使用定义的 border-1px 类

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

5.测试效果，1px 看不出效果，这里我设置的是10px方便测试查看；
①：设置为10px，没有使用上面第步骤三做dpr处理效果

②：设置10px，使用了上面步骤三做dpr处理效果，明显细了一半。由此可以得出设置1px也会缩小一半，解决了设置1px，真机下会2px加粗的效果。

移动端设置border的1px像素解决方案相关推荐

移动端1px像素的设置？
1px解决方案-:before, :after与transform 之前说的frozenUI的圆角边框就是采用这种方式, 构建1个伪元素, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以tran ...
[css] 移动端1px像素的问题及解决方案是什么？
[css] 移动端1px像素的问题及解决方案是什么? viewport结合rem解决像素比问题比如在devicePixelRatio=2设置meta <meta name="view ...
移动端，h5页面1px 1像素边框过粗解决方案
移动端,h5页面1px 1像素边框过粗解决方案参考文章: (1)移动端,h5页面1px 1像素边框过粗解决方案 (2)https://www.cnblogs.com/uimeigui/p/12150 ...
移动端1px问题解决方案
移动端1px问题解决方案高清屏中1px线问题在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即是 ...
移动端1px像素问题及解决办法
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题.首选先看一下,pc时代和移动 ...
非同款！六种移动端1px “黑眼圈” 解决方案
前言在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即是较经典的移动端1px像素问题. 本文默认你 ...
移动端下网页border：1px显示
解决这个问题之前首先要了解移动前端开发viewport的概念,自己写了一篇很粗糙viewport详解的文章对它有了一个很简单的理解.这里推荐一篇很详细的博文<<移动前端开发之viewpor ...
移动端1px像素实现技巧 - 讲解篇
移动端1px像素问题 - 解决办法: DPI介绍: 定义: DPI 表示(每英寸点数)图像每英寸长度内的点数. DPI(Dots Per Inch,每英寸点数)是一个量度单位,用于点阵数码影像,指每一 ...
HTML中表格table边框border（1px还嫌粗）的解决方案：
第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing=1 : 2.设置table的背景色为即你要设置的table的边框颜色: 3.设置所有td背景色为#ffffff白 ...

移动端设置border的1px像素解决方案

移动端设置border的1px像素解决方案相关推荐

最新文章

热门文章