解决移动端1px边框问题的⼏种⽅法（5种）
本⽂介绍了解决移动端1px边框问题的5种⽅法。当然了，在这之前先整理了与这些⽅法相关的知识：物理像素、设备独⽴像素、设备像素⽐和viewport。
物理像素、设备独⽴像素和设备像素⽐
在CSS中我们⼀般使⽤px作为单位，需要注意的是，CSS样式⾥⾯的px和物理像素并不是相等的。CSS中的像素只是⼀个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px⼀般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于⼏个物理像素。
物理像素(physical pixel)
物理像素⼜被称为设备像素、设备物理像素，它是显⽰器（电脑、⼿机屏幕）最⼩的物理显⽰单位，每个物理像素由颜⾊值和亮度值组成。所谓的⼀倍屏、⼆倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显⽰⼀个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显⽰⼀个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，⽽在Retina屏幕下，1个CSS像素对应的却是4个物理像素（参照下⽂⽥字⽰意图理解）。
div border属性设备独⽴像素(device-independent pixel)
设备独⽴像素⼜被称为CSS像素，是我们写CSS时所⽤的像素，它是⼀个抽像的单位，主要使⽤在浏览器上，⽤来精确度量Web页⾯上的内容。
设备像素⽐(device pixel ratio)
设备像素⽐简称为dpr，定义了物理像素和设备独⽴像素的对应关系：设备像素⽐＝物理像素 / 设备独⽴像素。
CSS的1px等于⼏个物理像素，除了和屏幕像素密度dpr有关，还和⽤户缩放有关系。例如，当⽤户把页⾯放⼤⼀倍，那么CSS中1px所代表的物理像素也会增加⼀倍；反之把页⾯缩⼩⼀倍，CSS中1px所代表的物理像素也会减少⼀倍。关于这点，在⽂章后⾯的1px细线问题部分还会讲到。
1px细线问题
在上⽂我们已经知道，CSS像素为1px宽的直线，对应的物理像素是不同的，可能是2px或者3px,⽽设计师想要的1px宽的直线，其实就是1物理像素宽。
对于CSS⽽⾔，可以认为是border: 0.5px;，这是多倍屏下能显⽰的最⼩单位。然⽽，并不是所有⼿机浏览器都能识别border: 0.5px，有的系统⾥，0.5px会被当成为0px处理，那么如何1px细线问题呢？
使⽤border-image实现
根据需求选择图⽚，然后根据css的border-image属性设置。代码如下：
div
{
-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
优点：可以设置单条、多条表框。缺点：更换颜⾊和样式⿇烦，某些设备上会模糊。
使⽤background-image实现
background-image 跟border-image的⽅法⼀样，你要先准备⼀张符合你要求的图⽚。优缺点与border-image⼀样。
.background-image-1px {
background: url(../img/line.png) repeat-x left bottom;
-webkit-background-size: 100% 1px; background-size: 100% 1px;
}
使⽤box-shadow模拟边框
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
优点：代码少，兼容性好。缺点：边框有阴影，颜⾊变浅。
上⾯三种⽅式效果并不是太好
伪元素+transform
构建1个伪元素, border为1px, 再以transform缩放到50%。
/* 设计稿是750，采⽤1：100的⽐例,font-size为100*(100vw/750) */
.border-1px {
position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-1px:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
优点：可以满⾜所有场景，且修改灵活。缺点：对于已使⽤伪类的元素要多层嵌套。
⽤JS计算rem基准值和viewport缩放值
/* 设计稿是750，采⽤1：100的⽐例,font-size为100 * (docEl.clientWidth * dpr / 750) */
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = ateElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
scale = 1 / dpr;
// 设置viewport，进⾏缩放，达到⾼清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); // 设置data-dpr属性，留作的css hack之⽤，解决图⽚模糊问题和1px细线问题
docEl.setAttribute('data-dpr', dpr);
// 动态写⼊样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
⽤JS根据屏幕尺⼨和dpr精确地设置不同屏幕所应有的rem基准值和initial-scale缩放值，这个JS⽅案已经在完美解决了1px细线问题
到此这篇关于解决移动端1px边框问题的⼏种⽅法(5种)的⽂章就介绍到这了，更多相关移动端1px边框内容请搜索以前的⽂章或继续浏览下
⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。