在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。

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>

目前解决移动端1px边框最好的方法的更多相关文章

  1. 解决移动端1px边框问题的几种方法

    1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中 ...

  2. 移动端1px边框

    问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...

  3. 移动端1px边框伪类宽高计算

    移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...

  4. 解决CSS移动端1px边框问题

    移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. < ...

  5. 移动端1px边框问题

    用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...

  6. 移动端1px边框实现

    问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...

  7. 移动端1px边框解决方案

    在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...

  8. border.css(解决移动端1px问题)

    由于某些机型分辨率过高,会导致1px变成2-多px像素的问题,引用bordercss解决 @charset "utf-8"; .border, .border-top, .bord ...

  9. 解决移动端1px的问题,设备像素比devicePixelRatio的应用

    本文主要针对移动端1物理像素问题展开 解决这个问题先要了解一下概念: CSS像素(CSS Pixel):(通俗说:样式中写的值)就是我们在样式代码中常写的逻辑像素,是一个抽象概念,实际并不存在 设备独 ...

随机推荐

  1. weblogic高级进阶之ssl配置证书

    1.首先需要明白ssl的原理 这里我们使用keytool的方式为AdminServer配置ssl证书 配置证书的方式如下所示: C:\Users\Administrator\Desktop\mykey ...

  2. 网络虚拟化之linux虚拟网络基础

    1 linux虚拟网络基础 1.1 Device 在linux里面devic(设备)与传统网络概念里的物理设备(如交换机.路由器)不同,Linux所说的设备,其背后指的是一个类似于数据结构.内核模块或 ...

  3. MarkDown编辑器的区别对比

    标题: MarkDown编辑器的区别对比 作者: 梦幻之心星 sky-seeker@qq.com 标签: [MarkDown, 编辑器,区别] 目录: [软件] 日期: 2020-6-22 前提说明 ...

  4. zabbix4.4安装

    本安装操作系统为centos7.5. 安装前准备: 1.1 安装依赖包: yum -y install wget net-snmp-devel OpenIPMI-devel httpd openssl ...

  5. ajax前后端交互原理(4)

    4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...

  6. DOM-BOM-EVENT(1)

    1.DOM简介 DOM(Document Object Model)即文档对象模型,是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使得从程序中对该结构进行访问,从 ...

  7. Kubernetes 中 搭建 EFK 日志搜索中心

    简介 Elastic 官方已经发布了Elasticsearch Operator ,简化了 elasticsearch 以及 kibana的部署与升级,结合 fluentd-kubernetes-da ...

  8. 状压DP之吃奶酪

    题目 传送们 思路 1≤n≤15,妥妥的状压,数据这么小, 这道题的状压思路还是很好想的,我们定义f[i][s]代表以i为起点,吃掉状态为s的奶酪所需要跑的最短距离,那么显然,我们先枚举状态s,然后枚 ...

  9. 初识C#扩展方法

    1)扩展方法是什么? 扩展方法可以在不修改原有类的代码前提下,给类“增加”一个方法.扩展方法虽然属于静态方法,但调用的语法却和对象调用类似.直接用一个例子来演示扩展方法. 1.准备实体类 public ...

  10. postman-3-请求

    请求头 单击Headers选项卡将显示请求头键-值编辑器.我们可以将任何字符串设置为请求头名称.在输入字段时,自动完成下拉菜单将补充常见HTTP请求头. Content-Type标题的值也可从自动完成 ...