共计 3060 个字符，预计需要花费 8 分钟才能阅读完成。
一、为什么会有 1px 问题
要解决这个问题，必须先补充一个知识点，就是设施的 物理像素 [设施像素] & 逻辑像素 [CSS 像素]；
物理像素：挪动设施出厂时，不同设施自带的不同像素，也称硬件像素；
逻辑像素：css 中记录的像素。
在开发中，为什么挪动端 CSS 外面写了 1px，实际上看起来比 1px 粗；理解设施物理像素和逻辑像素的同学应该很容易了解，其实这两个 px 的含意其实是不一样的，UI 设计师要求的 1px 是指设施的物理像素 1px，而 CSS 里记录的像素是逻辑像素，它们之间存在一个比例关系，通常能够用 javascript 中的 window.devicePixelRatio 来获取，也能够用媒体查问的 -webkit-min-device-pixel-ratio 来获取。当然，比例多少与设施相干。
在手机上 border 无奈达到咱们想要的成果。这是因为 devicePixelRatio 个性导致，iPhone 的 devicePixelRatio==2，而 border-width: 1px; 形容的是设施独立像素，所以，border 被放大到物理像素 2px 显示，在 iPhone 上就显得较粗。
二、解决方案
1.transform: scale(0.5) 计划 – 举荐: 很灵便
1.) 设置 height: 1px，依据媒体查问联合 transform 缩放为相应尺寸。
div {
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}2.) 用::after 和::before, 设置 border-bottom：1px solid #000, 而后在缩放 -webkit-transform: scaleY(0.5); 能够实现两根边线的需要
div::after{
content:'';width:100%;
border-bottom:1px solid #000;
transform: scaleY(0.5);
}
3.) 用::after 设置 border：1px solid #000; width:200%; height:200%, 而后再缩放 scaleY(0.5); 长处能够实现圆角，京东就是这么实现的，毛病是按钮增加 active 比拟麻烦。
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}2. 媒体查问 + transfrom
/* 2 倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3 倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}3.viewport+rem 实现
<html style="font-size:18px;">
<head>
<title>1px question</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
html {font-size: 1px;}
* {padding: 0;margin: 0;}
.bds_b {border-bottom: 1px solid #ccc;}
.a,
.b {margin-top: 1rem;padding: 1rem;font-size: 1.4rem;}
.a {width: 30rem;}
.b {background: #f5f5f5;width: 20rem;}
</style>
<script>
var viewport = document.querySelector("meta[name=viewport]");
// 上面是依据设施像素设置 viewport
if (window.devicePixelRatio == 1) {viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
}
if (window.devicePixelRatio == 2) {viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}
if (window.devicePixelRatio == 3) {viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;
</script>
</head>
<body>
<div class="bds_b a"> 上面的底边宽度是虚构 1 像素的 </div>
<div class="b"> 下面的边框宽度是虚构 1 像素的 </div>
</body>
</html>4.box-shadow 实现
box-shadow 属性的用法：box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]
参数别离示意: 程度暗影地位，垂直暗影地位，含糊间隔，暗影尺寸，暗影色彩，将内部暗影改为外部暗影，后四个可选。该例中为何将暗影尺寸设置为正数？设置成 -1px 是为了让暗影尺寸稍小于 div 元素尺寸，这样左右两边的暗影就不会裸露进去，实现只有底部一边有暗影的成果。从而实现分割线成果（单边边框）。
div{-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
}https://www.jianshu.com/p/31f…
https://segmentfault.com/a/11…
