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

tech2022-07-31 161

一像素边框的解决方案

原因：不同的设备，不同的设备像素比（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"></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%;

使用：

最新回复(0)