vue react移动端解决1像素边框的适配问题_@media (max--moz-device-pixel-ratio 1

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

@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 {


### 最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)

![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)



/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)

![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)