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

Myth丶恋晨 2022-12-09 15:59 151阅读 0赞

因为不同的设备，不同的设备像素比（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中导入

### 方法使用解析： ###

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

参数：

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>简述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-width</td> 
   <td>边框线的宽度 默认为1px <code>注解1</code></td> 
  </tr> 
  <tr> 
   <td>border-color</td> 
   <td>边框线的颜色 默认为灰色</td> 
  </tr> 
  <tr> 
   <td>border-style</td> 
   <td>边框线样式 默认为实线</td> 
  </tr> 
  <tr> 
   <td>radius</td> 
   <td>边框线的圆角弧度 默认0</td> 
  </tr> 
 </tbody> 
</table>

`注解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,
    }

参数：

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>简述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>边框线的宽度 默认为1px <code>注解1</code></td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>边框线的颜色 默认为灰色</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td>边框线样式 默认为实线</td> 
  </tr> 
  <tr> 
   <td>radius</td> 
   <td>边框线的圆角弧度 默认0</td> 
  </tr> 
 </tbody> 
</table>