问题：ui设计稿中边框为1px，在实际的前端开发，移动端设备中会出现设置border：1px solid #000;出现边框过粗的现象的问题。
答：因为ui设计稿中的边框是物理像素，而css设置的像素是逻辑像素，之间存在比例关系，1px（物理像素）不等于1px（逻辑像素）
一、几个概念
1、device pixels 即设备像素/物理像素
设备产品说明书上所列出的物理像素，设备出厂的时候设置好的，这个值固定不变，也是UI设计师设计稿中显示的像素值
2、css pixels 即逻辑像素
Css/Js理解的像素单位，与设备像素没有必然联系。
3、dpr像素比（设备像素 / CSS像素(某一方向上)）
通过window.devicePixelRatio可获取当前设备的dpr，或者用媒体查询的-webkit-min-device-pixel-ratio来获取当比例为 1：1 时，表示1个物理像素显示一个css像素；当比例为 2：1 时，表示使用4个物理像素显示1个逻辑像素。
4、rem相对单位（相对于根元素的字体大小的单位）
如果不设置根元素的字体大小，则会默认以根元素的16px的大小计算值，假设根元素设置字体大小为16px，则8rem = 8 * 16px = 128px，rem和em的区别在于根据谁来计算值，em是根据使用em单位的元素的字体大小计算值，比如当前div设置字体大小为18px，padding设置为10em，那么此时padding的值就是10 * 18=180px，而rem是根据根元素大小计算值
设置根元素大小，可通过js动态添加：
根据设计稿尺寸大小修改代码
**// rem布局的核心代码。 此例默认UI稿按 1080 * 1920 提供**
(function(win, doc){
var docEl = doc.documentElement,
resizeEvt = 'oritationchange' in window ? 'oritationchange' : 'resize',
recalc = function(){
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth < 550) {
docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
}
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DomContentLoaded', recalc, false);
})(window, document)
解决方案
1、通过修改meta中viewport的initial-scale值配合rem来进行缩放
(1)移动端页面初始化头部引入
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
(2)根据当前像素比进行缩放，比如dpr为2的时候，initial-scale就为0.5。同时设置根元素的字体大小，用rem设置元素相对宽高
window.onload = function(){
let dpr = window.devicePixelRatio
let scale = 1/dpr
let metaNode = document.querySelector('meta[name="viewport"]')
metaNode.setAttribute('content','width=device-width, initial-scale='+scale+',user-scalable=no')
//元素的宽度高度需反向乘回来
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;
}
2、通过css的方法设置
利用伪元素:before,:after默认设置height: 1px，transform: scale(0.5)，根据媒体查询结合transform缩放为相应尺寸。
.border-bottom::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倍屏 */
@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、其他不常用方法
(1)box-shadow，此处颜色较难控制
box-shadow: 水平阴影位置，垂直阴影位置，模糊距离， 阴影尺寸，阴影颜色，将外部阴影改为内部阴影;
div {
-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
(2)border-image
通过图片裁剪的方式
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url("border.png") 2 0 stretch;
border-image: url("border.png") 2 0 stretch;
}
(3)background-img渐变
思路就是设置1px的渐变背景，然后50%的颜色到50%的透明的延伸，此处无法设置圆角
linear-gradient(渐变旋转角度，渐变开始的颜色，哪个颜色到百分比的位置，以此类推)
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
参考资料
https://www.jianshu.com/p/fa670b737a29
https://blog.csdn.net/SilenceJude/article/details/81906716
