项目中遇到的一像素解决方案

一像素边框的解决方案

原因：不同的设备，不同的设备像素比（dpr）导致的；

通过media来媒体查询

React：style-components解决方案

可设置颜色、类型、粗细，有默认值，也可通过父组件来传递参数

//定义
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 };
        }
        
      transform-origin: 0 0;
    }
  `
}

export default border

使用：包裹一个被加边框的元素后生成一个新的组件

import border from '@/CommonStyled/border.js'

//包裹使用
const SearchInput  = border(styled.div `...`)

//jsx通过属性传递，ChildComponentStyle是Search组件里面的内容，可以通过{...this.props拿到父组件的属性}
<Search width="1px" radius={0.16}></Search>

//Search.jsx
class Search extends Component {
    render() {
        return (
            <>
                <SearchContainer {...this.props}>
                    <SearchInput {...this.props}>
                        <i className="iconfont">&#xe60e;</i>
                        <span>{this.props.message}</span>
                    </SearchInput>
                </SearchContainer>
            </>
        )
    }
}

vue

通过定义公共样式.styl来处理边框问题

border.styl

//加四周边框
$border(width = 0, color = #ccc, style = solid, radius = 0)
  position relative
  border-radius radius
  &::after
    pointer-events none
    position absolute
    z-index 999
    top 0
    left 0
    content ""
    border-color color
    border-style style
    border-width 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)
      border-radius radius

    @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 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)
      border-radius radius * 3

    transform-origin 0 0

borderDown.styl

//加底部边框
$borderdown($color) 
    position: relative;

    @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) 
      &::before 
        content: " ";
        position: absolute;
        left: 0px;
        bottom: 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;
        bottom: 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;
        bottom: 0px;
        background-color: $color;
        transform: scaleY(0.333);
        height: 1px;
        width: 100%;

使用：

<style lang='stylus' scoped>
    @import "../../assets/style/border";
    @import "../../assets/style/borderDown";
    
    
    .className
        $border(1px,rgba(0,0,0,.08),,8px)
        .childclassName
            $borderdown(rgba(0,0,0,.08))
<style>