.component-confirm__buttons {
border-top: 1px solid #eceef0;
box-shadow: 0 1px 1px #fff;
}

造成边框变粗的原因

其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。

devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。

解决边框变粗的6种办法

1、0.5px边框

在2014年的 WWDC,“设计响应的Web体验” 一讲中,Ted O’Connor 讲到关于“retinahairlines”(retina 极细的线):在retina屏上仅仅显示1物理像素的边框,开发者应该如何处理呢。

他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框:

0.5px边框

额的神呐!so easy! 果真如此吗?这样还不够(WWDC幻灯片通常是“唬人”的),但是相差不多。

问题是 retina 屏的浏览器可能不认识0.5px的边框,将会把它解释成0px,没有边框。包括 iOS 7 和之前版本,OS X Mavericks 及以前版本,还有 Android 设备。

解决方案:
解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框,如果可以,给html标签元素添加个class。

if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1) {
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
// 脚本应该放在内,如果在里面运行,需要包装 $(document).ready(function() {})

然后,极细的边框样式就容易了:

div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}

优点:

缺点:

2、使用border-image实现

准备一张符合你要求的border-image:

底部边框

样式设置:

.border-bottom-1px {
border-width: 0 0 1px 0;
-webkit-border-image: url(linenew.png) 0 0 2 0 stretch;
border-image: url(linenew.png) 0 0 2 0 stretch;
}

上文是把border设置在边框的底部,所以使用的图片是2px高,上部的1px颜色为透明,下部的1px使用视觉规定的border的颜色。如果边框底部和顶部同时需要border,可以使用下面的border-image:

上下边框

样式设置:

.border-image-1px {
border-width: 1px 0;
-webkit-border-image: url(linenew.png) 2 0 stretch;
border-image: url(linenew.png) 2 0 stretch;
}

到目前为止,我们已经能在iphone上展现1px border的效果了。但是我们发现这样的方法在非视网膜屏上会出现border显示不出来的现象,于是使用Media Query做了一些兼容,样式设置如下:

.border-image-1px {
border-bottom: 1px solid #666;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.border-image-1px {
border-bottom: none;
border-width: 0 0 1px 0;
-webkit-border-image: url(../img/linenew.png) 0 0 2 0 stretch;
border-image: url(../img/linenew.png) 0 0 2 0 stretch;
}
}

优点:

缺点:

  • 修改颜色麻烦, 需要替换图片
  • 圆角需要特殊处理,并且边缘会模糊
3、使用background-image实现

background-image 跟border-image的方法一样,你要先准备一张符合你要求的图片。然后将边框模拟在背景上。
样式设置:

.background-image-1px {
background: url(../img/line.png) repeat-x left bottom;
-webkit-background-size: 100% 1px;
background-size: 100% 1px;
}

优点:

缺点:

  • 修改颜色麻烦, 需要替换图片
  • 圆角需要特殊处理,并且边缘会模糊
4、多背景渐变实现

与background-image方案类似,只是将图片替换为css3渐变。设置1px的渐变背景,50%有颜色,50%透明。
样式设置:

.background-gradient-1px {
background:
linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
}
/* 或者 */
.background-gradient-1px{
background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
background-size: 100% 1px;
}

优点:

缺点:

5、使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果
样式设置:

.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

优点:

缺点:

6、viewport + rem 实现

同时通过设置对应viewport的rem基准值,这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时,输出viewport:

在devicePixelRatio = 3 时,输出viewport:
```html

这种兼容方案相对比较完美,适合新的项目,老的项目修改成本过大。
对于这种方案,可以看看《使用Flexible实现手淘H5页面的终端适配》
优点:

缺点:

7、伪类 + transform 实现

对于老项目,有没有什么办法能兼容1px的尴尬问题了,个人认为伪类+transform是比较完美的方法了。原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。

单条border样式设置:

.scale-1px{
position: relative;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

四条boder样式设置:

.scale-1px{
position: relative;
margin-bottom: 20px;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}

最好在使用前也判断一下,结合 JS 代码,判断是否 Retina 屏:

if(window.devicePixelRatio && devicePixelRatio >= 2){
document.querySelector('ul').className = 'scale-1px';
}

优点:

  • 所有场景都能满足
  • 支持圆角(伪类和本体类都需要加border-radius)

缺点:

  • 对于已经使用伪类的元素(例如clearfix),可能需要多层嵌套

移动端1px问题的更多相关文章

  1. 移动端1px边框

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

  2. 移动端1px细线解决方案总结

    现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...

  3. 移动端1px细线解决方案--利用transform缩放方式

    移动端1px会显示为2px; 解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放 1. 上边框 相当于 border-top <div class="bor ...

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

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

  5. 目前解决移动端1px边框最好的方法

    在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...

  6. 移动端1px

    移动端不同尺寸设备dpi不同,会造成1px线条不同程度的缩放,可利用媒体查询device-pixel-ratio,进行不同情况匹配: @media(-webkit-min-device-pixel-r ...

  7. 移动端1px问题处理方法

    在做移动端开发时,设计师提供的视觉稿一般是750px,当你定义 border-width:1px 时,在iphone6手机上却发现:边框变粗了.. 这是因为,1px是相对于750px的(物理像素),而 ...

  8. 移动端1px的解决办法之styled

    做项目的时候总结了一个styled中解决移动端项目1px像素线的问题,封装了一个函数,大家可以直接使用,很方便. 1 import styled from 'styled-components' co ...

  9. 移动端1px边框实现

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

  10. 移动端1px边框问题

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

随机推荐

  1. [转]Fiddler模拟post四种请求数据

    1 前言 仅作为记录使用. 2 内容 post请求主体详解: 对于get请求来说没有请求主体entity-body.对于post请求而言,不会对发送请求的数据格式进行限制,理论上你可以发任意数据,但是 ...

  2. nginx的location、rewrite玩法详解

      1. location正则写法 一个示例: 1234567891011121314151617181920212223242526272829303132333435363738394041424 ...

  3. Confluence 6 数据库表-系统信息(System information)

    这些表格有存储数据相关的状态和 Confluence 站点的相关配置信息. confversion 被用来在升级系统的时候确定那个数据库的版本应该使用,这个表格只对数据库升级有影响. pluginda ...

  4. LeetCode(93): 复原IP地址

    Medium! 题目描述: 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255. ...

  5. cf1107e uva10559区间dp升维

    /* 区间dp,为什么要升维? 因为若用dp[l][r]表示消去dp[l][r]的最大的分,那么显然状态转移方程dp[l][r]=max{dp[l+1][k-1]+(len[l]+len[k])^2+ ...

  6. bzoj 1495

    这是一道...卡了我一个月的树形dp... 我真是太弱了... 其实仔细想想,这题的核心思路并不是特别复杂,但是的确存在不小的难度 作为一个看过全网基本所有题解+标程才弄明白这题到底怎么回事的蒟蒻,我 ...

  7. 利用vue-cli创建新项目

    1.安装vue-cli npm i vue-cli --gd 2.初始化一个项目 vue init webpack test //test 是个项目名称并且配置相应的配置,(测试部份的可以选择no) ...

  8. Vuex状态管理模式的面试题及答案

    转载:点击查看原文 1.vuex有哪几种属性? 答:有五种,分别是 State. Getter.Mutation .Action. Module 2.vuex的State特性是? 答: 一.Vuex就 ...

  9. Linux文本分析命令awk的妙用

    基本用法 awk是一个强大的文本分析工具,简单来说awk就是把文件逐行读入,(空格,制表符)为默认分隔符将每行切片,切开的部分再进行各种分析处理 awk命令格式如下 awk [-F field-sep ...

  10. jquery checkbox勾选/取消勾选只能操作一次的诡异问题

    第一次执行,没问题,但第二次执行就有问题了,选择不了 解决办法:把attr()换成prop() $("#CheckedAll").click(function () { if ($ ...