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

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实现一像素边框


##### 实现效果


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200730111530561.png)


##### 文件夹创建如下


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200730112658401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1Nzk2NA==,size_16,color_FFFFFF,t_70)


* **Cookbook.jsx**是一个页面组件，需要引入搜索框的组件Search.js
* **Search.js**是一个搜索框的组件，从**StyledSearch.js**中导入了SearchContainer，InputContainer两个styled-compoenet样式设置当前搜索框的样式
* **border.js**是封装一像素边框的一个文件，哪个组件引用它就会给哪个组件添加一像素边框


###### border.js


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


### 学习笔记

主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

>**HTML/CSS**
>


**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

![](https://img-blog.csdnimg.cn/img_convert/4792779df3b15d2f36bce2b0db6e1bab.webp?x-oss-process=image/format,png)

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

![](https://img-blog.csdnimg.cn/img_convert/2efb1e683f0433bae2fb5910187907ca.webp?x-oss-process=image/format,png)

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中...(img-tDtKLUNb-1718720202605)]

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

![](https://img-blog.csdnimg.cn/img_convert/4336536662dea90543c15c5eeb685f50.webp?x-oss-process=image/format,png)