扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关移动端开发1px线的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
站在用户的角度思考问题，与客户深入沟通，找到房山网站设计与房山网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广、域名与空间、网站空间、企业邮箱。业务覆盖房山地区。
1px线变粗的原因
在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，虽然表面上看起来和设计稿是一样的，可是就是没设计稿那种感觉，而且莫名还有一种山寨的气息，UI审查的时候也常常会觉得分割线或则边框线太粗了，要更细一点，但是一看代码，已经是1px了，为什么看着还是那么粗呢？
要知道问题的原因首先要了解一下几个概念：
(1)物理像素(physical pixel)
一个物理像素是显示器（手机屏幕）上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 如：iPhone6上就有750*1334个物理像素颗粒。
(2)设备独立像素(density-independent pixel)
设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素（比如：css像素），有时我们也说成是逻辑像素。然后由相关系统转换为物理像素。所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。
(3)设备像素比(device pixel ratio )简称dpr
设备像素比（简称dpr）定义了物理像素和设备独立像素的对应关系。它的值可以按如下的公式的得到：
设备像素比(dpr)=物理像素/逻辑像素(px) // 在某一方向上，x方向或者y方向，下图dpr=2
知道了设备像素比，我们就大概知道了1px线变粗的原因。简单来说就是手机屏幕分辨率越来越高了，同样大小的一个手机，它的实际物理像素数更多了。因为不同的移动设备有不同的像素密度，所以我们所写的1px在不同的移动设备上等于这个移动设备的1px。现在做移动端开发时一般都要加上一句话：
这句话定义了本页面的viewport的宽度为设备宽度，初始缩放值和最大缩放值都为1，并禁止了用户缩放。
viewport的设置和屏幕物理分辨率是按比例而不是相同的，移动端window对象有个devicePixelRatio属性，它表示设备物理像素和css像素的比例，在retina屏的iphone手机上，这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px。通过设置viewport，可以改变css中的1px用多少物理像素来渲染，设置了不同的viewport，当然1px的线条看起来粗细不一致。
1px线变粗的解决方法
伪类 + scale
这种方法的原理就是把原来元素的border去掉，然后用 :before 或者 :after 重做 border ，原先的元素相对定位，新做的 border 绝对，定位使用 transform 的 scale 把线条高度缩小一半，新边框就相当于0.5px了。代码如下：
.scale{
position: relative;
border:none;
}
.scale: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;
}使用flexible.js
前面已经说过1px变粗的原因就在于一刀切的设置viewport宽度，如果能把viewport宽度设置为实际的设备物理宽度，css里的1px不就等于实际1px长了么。 flexible.js的原理就是这样，先获取设备缩放比devicePixelRatio，然后根据缩放比来动态设定viewport的值，这样导致的结果就是无论是哪个设备，1px所表示的永远是1个设备像素，即该设备的最小像素。