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)
相关推荐
别拿曾经看以后~37 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
‍。。。1 小时前
使用Rust实现http/https正向代理
http·https·rust
Source.Liu1 小时前
【用Rust写CAD】第二章 第四节 函数
开发语言·rust
monkey_meng1 小时前
【Rust中的迭代器】
开发语言·后端·rust
余衫马1 小时前
Rust-Trait 特征编程
开发语言·后端·rust
monkey_meng1 小时前
【Rust中多线程同步机制】
开发语言·redis·后端·rust
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
Devil枫7 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子8 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js