vue react移动端解决1像素边框的适配问题

本文实现了三种移动端实现一像素边框的方法

思路

• 给准备给加边框的加伪元素，给伪元素加边框
• 判断当前设备dpr，根据不同设备宽高放大两倍或者三倍
• 再根据当前像素比进行缩放0.5或者0.33333

vue中可使用stylus或者sass实现一像素边框

stylus版

$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

使用:

@import '~assets/border.styl'
div
	$border(1px 0 0 0, #eee)

sass版

封装一个mixin方法

@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%;
    }
  }
}

使用方法：直接在css里面设置即可

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

react使用styled-components实现一像素边框

实现效果

文件夹创建如下

• Cookbook.jsx是一个页面组件，需要引入搜索框的组件Search.js

• Search.js是一个搜索框的组件，从StyledSearch.js中导入了SearchContainer，InputContainer两个styled-compoenet样式设置当前搜索框的样式

• border.js是封装一像素边框的一个文件，哪个组件引用它就会给哪个组件添加一像素边框

border.js

border是一个高阶组件，这里需要传过来一个组件，返回的是一个设置完一像素边框的组件
border设置了一些默认属性，color style width radius ，如果不传值的话则会显示默认的属性
安装 styled-componentsyarn 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

Cookbook.jsx

cookbook导入Search组件，并且设置相应的一像素边框的属性，会传递给子组件

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

 </Search>

Search.js

使用{...this.props}接收从父组件Cookbook.jsx传过来的属性，并且又传递给子组件InputContainer .js

import React, { Component } from 'react'

import { SearchContainer,InputContainer } from './StyledSearch'

export default class Search extends Component {
  render() {
    return (
      <>
        <SearchContainer>
          <InputContainer {...this.props}>
            <i></i>
            <b>想吃什么搜这里,如川菜</b>
          </InputContainer>
        </SearchContainer>
      </>
    )
  }
}

styledSearch.js

在这里引入border.js，border.js是一个高阶组件，需要把我们当前的组件当作border的参数，这时候我们就可以使用一像素边框了

import styled from 'styled-components'
import border from "../styled/border"
const SearchContainer = styled.div`
  padding: .1rem .15rem;

`
const InputContainer = 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,
    InputContainer
}