其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的,
首先我还是先介绍一下原理和所依赖的方法
原理:其实他们都是通过css3的媒体查询来实现的
步骤思路:
1、给目标元素进行相对定位
2、给目标元素添加伪元素 ::after/before 并进行绝对定位
3、判断DPI 1DPI 100% --------------使用媒体查询
2DPI 200%
3DPI 300%
4、通过css3中的transform scale等比缩放
下面是具体的代码,使用时只需引入代码 在style里直接写 border: 1px 0 0 0, #ccc 即可使用
在stylus中
border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0) // 为边框位置提供定位参考 position: relative; if $border-width == null $border- 0; border-radius: $radius; &::after // 用以解决边框layer遮盖内容 pointer-events: none; position: absolute; z-index: 999; top: 0; left: 0; // fix当元素宽度出现小数时,边框可能显示不全的问题 // overflow: hidden; content: "