Vue React解决移动端一像素问题的封装

因为不同的设备，不同的设备像素比（dpr）导致的。当我们在样式中设置边框宽度为 1px 时（这里使用的是css像素），设备像素比为2的设备，会用4个物理像素（dp）来渲染这个边框；而设备像素比为1的设备，会用1个物理像素来渲染这个边框，导致最终的视觉效果有差异。

Vue stylus封装：

stylus封装

border_1px(border-width = 1px, border-color = #ccc, border-style = solid, radius = 0)
  // 为边框位置提供定位参考
  position relative
  border-radius radius
  &::after
    // 用以解决边框layer遮盖内容
    pointer-events none
    position absolute
    z-index 999
    top 0
    left 0
    content '\0020'
    border-color border-color
    border-style border-style
    border-width border-width
    @media (max--moz-device-pixel-ratio 1.49), (-webkit-max-device-pixel-ratio 1.49), (max-device-pixel-ratio 1.49), (max-resolution 143dpi), (max-resolution 1.49dppx)
      width 100%
      height 100%
      transform scale(1)
      if (radius != 0)
        border-radius radius * 1
    @media (min--moz-device-pixel-ratio 1.5) and (max--moz-device-pixel-ratio 2.49), (-webkit-min-device-pixel-ratio 1.5) and (-webkit-max-device-pixel-ratio 2.49), (min-device-pixel-ratio 1.5) and (max-device-pixel-ratio 2.49), (min-resolution 144dpi) and (max-resolution 239dpi), (min-resolution 1.5dppx) and (max-resolution 2.49dppx)
      width 200%
      height 200%
      transform scale(0.5)
      if (radius != 0)
        border-radius radius * 2
    @media (min--moz-device-pixel-ratio 2.5), (-webkit-min-device-pixel-ratio 2.5), (min-device-pixel-ratio 2.5), (min-resolution 240dpi), (min-resolution 2.5dppx)
      width 300%
      height 300%
      transform scale(0.3333333)
      if (radius != 0)
        border-radius radius * 3
    transform-origin 0 0

方法使用

vue单文件导入
style中导入

<style lang="stylus" scoped>
@import '~@a/stylus/border.styl' // 解决一像素问题
div
	border_1px(1px)
</style>

方法使用解析：

border_1px(border-width = 1px, border-color = #ccc, border-style = solid, radius = 0)

参数：

参数名	简述
border-width	边框线的宽度 默认为1px 注解1
border-color	边框线的颜色 默认为灰色
border-style	边框线样式 默认为实线
radius	边框线的圆角弧度 默认0

注解1

• 给上面添加边框线（1px 0 0 0）
• 给下面添加边框线（0 0 1px 0）
• 给左面添加边框线（0 0 0 1px）
• 给右面添加边框线（0 1px 0 0）
  …

sass封装

@mixin border_1px($color) {
  position: relative;
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
    &::before {
      content: " ";
      position: absolute;
      left: 0px;
      top: 0px;
      background-color: $color;
      transform: scaleY(0.667);
      height: 1px;
      width: 100%;
    }
  }

  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    &::before {
      content: " ";
      position: absolute;
      left: 0px;
      top: 0px;
      background-color: $color;
      transform: scaleY(0.5);
      height: 1px;
      width: 100%;
    }
  }

  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    &::before {
      content: " ";
      position: absolute;
      left: 0px;
      top: 0px;
      background-color: $color;
      transform: scaleY(0.333);
      height: 1px;
      width: 100%;
    }
  }
}

方法使用

直接在sass使用

@include border_1px(rgb(211, 208, 208));

react styled-components封装

创建border.js
border是一个高阶组件，这里需要传过来一个组件，返回的是一个设置完一像素边框的组件
border设置了一些默认属性，color style width radius ，如果不传值的话则会显示默认的属性
安装yarn add styled-components -S

import styled from "styled-components"

const border = (StyledComp) => {
    return styled(StyledComp)`
    position:relative;
  border-radius:${props=>props.radius || 0}rem;
  &::after{
    pointer-events:none;
    position:absolute;
    z-index:999;
    top: 0;
    left: 0;
    content: "";
    border-color: ${props=>props.color || "#ccc"};
    border-style: ${props=>props.style || "solid"};
    border-width: ${props=>props.width || 0};

    @media (max--moz-device-pixel-ratio: 1.49),
      (-webkit-max-device-pixel-ratio: 1.49),
      (max-device-pixel-ratio: 1.49),
      (max-resolution: 143dpi),
      (max-resolution: 1.49dppx){
        width: 100%;
        height :100%;
        transform: scale(1);
        border-radius: ${props=>props.radius || 0}rem;
      }
      

    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
      (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
      (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
      (min-resolution: 144dpi) and (max-resolution: 239dpi),
      (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx){
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        border-radius: ${props=>props.radius*2 || 0}rem;
      }
      

    @media (min--moz-device-pixel-ratio: 2.5),
      (-webkit-min-device-pixel-ratio: 2.5),
      (min-device-pixel-ratio: 2.5),
      (min-resolution: 240dpi),
      (min-resolution: 2.5dppx){
        width :300%;
        height :300%;
        transform :scale(0.3333333);
        border-radius:  ${props=>props.radius*3 || 0}rem;
      }
      

    transform-origin: 0 0;
    }
    `
}
export default border

使用

在样式中

import styled from 'styled-components'
import border from "../styled/border"//导入一像素的封装
//
const SearchContainer= border(styled.div`
    display:flex;
    height:.44rem;
    width:100%;
    background:${props=>props.background ||"#fff"} ;
    align-items:center;
    justify-content:center;
    b{
        font-weight:normal;
        color:#666
    }
`
)

export {
    SearchContainer,
}

 <Search 
     width="1px"
     color="#ee742f"
     radius={0.06}
     // background="#eee"
 >

 </Search>

参数：

参数名	简述
width	边框线的宽度 默认为1px 注解1
color	边框线的颜色 默认为灰色
style	边框线样式 默认为实线
radius	边框线的圆角弧度 默认0