目前解决移动端1px边框最好的方法
在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。
1px 边框问题的由来
苹果 iPhone4 首次提出了 Retina Display(视网膜屏幕)的概念,在 iPhone4 使用的视网膜屏幕中,把 2x2 个像素当 1 个物理像素使用,即使用 2x2 个像素显示原来 1 个物理像素显示的内容,从而让 UI 显示更精致清晰,这 2x2 个像素叫做逻辑像素。像这种像素比(像素比(即dpr)= 物理像素 / 逻辑像素)为 2 的视网膜屏幕也被称为二倍屏,目前市面上还有像素比更高的三倍屏、四倍屏。而 CSS 中 1px 指的是物理像素,因此,设置为 1px 的边框在 dpr = 2 的视网膜屏幕中实际占用了 2 个逻辑像素的宽度,这就导致了界面边框变粗的视觉体验。
使用 transform 解决
通过设置元素的 box-sizing 为 border-box,然后构建伪元素,再使用 CSS3 的 transform 缩放,这是目前市面上最受推崇的解决方法。这种方法可以满足所有的场景,而且修改灵活,唯一的缺陷是,对于已使用伪元素的元素要多嵌套一个无用元素。具体的实现如下:
.one-pixel-border {
position: relative;
box-sizing: border-box;
}
.one-pixel-border::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
border: 1px solid red;
transform: translate(-50%, -50%) scale(0.5, 0.5);
}
这样就可以得到 0.5px 的边框。
还可以结合媒体查询(@media)解决不同 dpr 值屏幕的边框问题,如下:
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
...
}
@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
...
}
注意:IOS 系统的 safari 浏览器不支持标准的 min-resolution,使用非标准的 min-device-pixel-ratio。
使用 pixel-border.css 解决
pixel-border.css是一个解决移动端 1px 边框的通用 CSS 工具。使用 transform 的解决方法,仅有几行的源码,使用起来非常方便,是目前发现最好的解决方法。
安装
npm安装:
npm install pixel-border --save
yarn安装:
yarn add pixel-border
浏览器安装,建议安装压缩后的版本:
<link rel="stylesheet" href="path/to/pixel-border.min.css"><link>
使用
pixel-border 通过元素的 ::before 伪元素使用 transform 缩放为元素设置边框。因此,你可以使用原生的 CSS 边框属性为原素设置边框,只需要在元素上添加一个 pixel-border 或 pixel-border="true" 的属性,并设置元素的 border-style 值即可。如下会创建一个单像素边框:
<div pixel-border style="border-style: solid;">单像素边框</div>
注意:pixel-border已为元素的边框设置为固定值 1px,因此不要为元素再设置 border-width,并且元素的 box-sizing 值被设置为 border-box,请不要重置为其他类型的值。
设置任意边框:
设置元素某一边的边框时,只需为元素设置 border-top-style、border-bottom-style、border-left-style、border-right-style 其中一项的值,并设置元素 border-color 的值即可。如下设置上边边框:
<style>
.border-top {
border-top-style: solid;
border-top-color: red;
}
</style>
<div class="border-top" pixel-border>上边框</div>
设置圆角边框:
当需要圆角边框时,始终为 border-radius 设置百分比值。如下:
<style>
.border-radius {
width: 100px;
height: 100px;
border-style: solid;
border-color: red;
border-radius: 10%;
}
</style>
<div class="border-radius" pixel-border>圆角边框</div>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kubeflow实战: 入门介绍与部署实践
- matplotlib基础绘图命令之violinplot
- 性能分析(3)- 短时进程导致用户 CPU 使用率过高案例
- stat 命令家族(1)- 详解 vmstat
- 性能测试必备知识(9)- 深入理解“软中断”
- Vue老项目支持Webpack打包
- 09-4 更改用户密码
- 10-3 信号
- 11-1 环境中存储的是什么?
- 【Rust日报】2020-08-07 无船同志关于Rust未来Generator语法的新尝试
- 11-2 环境是如何建立的
- 11-3 激活修改
- 12-1 定制提示符
- MySQL INSERT的4种形态
- PowerBI DAX 性能优化 高级视图算法 超越经典 性能提升成千上万倍