（一像素边框的运用）移动端利用yo框架改编的Sass stylus 以及 react styled模块化CSS中一像素边框的运用

为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用javascript中的window.devicePixelRatio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取。当然，比例多少与设备相关。
在手机上border无法达到我们想要的效果。这是因为devicePixelRatio特性导致，iPhone的devicePixelRatio==2，而border-width: 1px描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。
解决这个开发中一像素边框的问题其实很简单，这里我是用yo3当中的框架，

执行yarn命令安装yo3

yarn add yo3

在目录文件node_modules>yo3>style>lib>core>classes>_border.scss文件（封装好的border文件）
这个是使用sass语法编写的，使用方法 引入文件

 @include border(npx npx npx npx, #e8e8e8);//上右下左 背景颜色

在stylus中使用

这是我根据上面yo框架中的代码改写的styl文件，代码在下

$border($border-width = 1px 0 0 0, $border-color = #ccc, $border-style = solid, $radius = 0)
  // 为边框位置提供定位参考
  position: relative;
  if $border-width == null
      $border-width: 0;

  border-radius: $radius;
  &::after
    // 用以解决边框layer遮盖内容
    pointer-events: none;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    // fix当元素宽度出现小数时，边框可能显示不全的问题
    // overflow: hidden;
    content: "\0020";
    border-color: $border-color;
    border-style: $border-style;
    border-width: $border-width;

    @media all and (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%;
        if $radius != 0
          border-radius: $radius;
          
    @media all and (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 all and (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.333333)
        if $radius != 0
          border-radius: $radius * 3;
        
    transform-origin 0 0

使用方法 引入此文件 哪个页面使用引入哪个页面 直接用border就可以例如
引入完后

border-top 1px solid #ebedf0

react中使用styled.js模块化css中的一像素边框

如果你使用的是react 使用的styled语法编写的可以直接复制下面我改写的内容，用法基本一致

import styled from 'styled-components'

const border = (Comp) => {
  const BorderedComp = styled(Comp) `
    position: relative;
    border-radius: ${props => props.radius || 0}px;
    &::after {
      pointer-events: none;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      content: '';
      border${props =>props.direction?'-'+props.direction:''} : ${props => props.width || '0'} ${props => props.color || '#ccc'} ${props => props.style || 'solid'};
      @media all and (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%;
          border-radius: ${props => props.radius || 0}px;
        }
            
      @media all and (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}px;
        }
        
      @media all and (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.333333);
          border-radius: ${props => props.radius * 3 || 0}px;
        }
          
      transform-origin: 0 0;
    }

  `
  return BorderedComp
}

export default border

使用方法引入：这个文件到你所需要使用的样式styled.js文件当中,使用高阶组件的思想吧样式包在上面创建的高阶组件中去
例子： styled.js文件

import styled from 'styled-components'
import border from 'styled/border' //你的文件地址

export const SearchHeaderPage = border(
    styled.div`
     	//你的样式
    `
)

react.jsx文件
引入上面styled文件

import {SearchHeaderPage } from "./SearchHeaderPage "; //styled.js文件路径

export class CaveoleaHome  {
  render() {
    return (
      <SearchHeaderPage
		      width="1px"      //宽度
              color="#E7E2E5"	//颜色
              direction="bottom" //方向
	>
      </SearchHeaderPage >
    )
  }
}

export default CaveoleaHome;