移动端1px border的解决方案问题移动端1px border 出现的原因有什么解决方案有必要了解的rem布局

问题

rem单位，使所有子元素的大小根据html元素的字体大小计算。因此只要改变rem的大小就能实现各个机型的适配。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';

由于font-size浏览器font-size最小值的限制和css计算方便，一般将根字体放大100倍，即：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

对应的rem也需要缩小100倍。或者设置：

body {
    font-size: 100rem;
}

方案很多，这只是一种比较简单的方案。

假设设计图宽度为750px，此时设计图上显示的为物理像素1px。而我们在书写过程中其实是逻辑像素，在dpr不为1的情况下，渲染出来的物理像素要比设计图上的1px大。因此就出现了1px的问题。
为什么不写0.5px，因为在不同浏览器中渲染不一致。或者说浏览器支持程度不一致。不建议使用。
本质上1px是用于渲染的最小单位。因此利用dpr计算border只是为了更还原设计图，提升用户体验。

利用伪元素配合transform: scale(1/dpr)实现
配合媒体查询实现，即device-pixel-ratio，对应浏览器兼容性。值得注意的是，device-pixel-ratio是一个非标准属性，因此需要加上对应的浏览器前缀。目前标准属性为resolution，对应MDN。less即scss都可以将该方法提取成公公方法以便开发中使用。less ant desigin mobile 实现。
注意点：需要注意设置transform-origin
利用图片（不推荐）。我对css的理解是只要是能用css原生属性实现的效果都不用图片，除了某些极端情况，比如存在较大差异的兼容性问题。
利用颜色欺骗。浅色boder相较于深色更细。

根据dpr设置对应meta标签的缩放倍数。这种方案需要变更根节点字体大小以及viewport。手机淘宝的方案。

the end