移动端1px模糊产生的原因以及解决方案
PPI是Pixels Per Inch缩写，pixels per inch所表示的是每英寸所拥有的像素（pixel）数目。手机屏幕的PPI当达到一定数值时，人眼就分辨不出颗粒感了。
“当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300ppi这个‘神奇数字’（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。”——乔布斯
4.3英寸、分辨率1280*720
=√(1280^2+720^2)/4.3=341.5359……≈342
Retina屏幕
苹果采用Retina屏幕技术得到了更多人的亲眯，因为Retina给画面带来了前所未有的清晰平滑效果。将更加高的2倍，甚至是3倍的像素点放在移动设备之中。
iPhone 3GS
iPhone 4
devicePixelRatio
设备上物理像素(750 * 1334)和设备独立像素(device-independent pixels (dips))的比例。（谷歌调试器中打印不同版本设备的window.devicePixelRatio可以查看各设备的像素比）
物理像素
设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。http://screensiz.es/查看移动设备的参数
css像素
img:10px 10px;假设一张10*10的图片在浏览器中，你查看他的尺寸，是10px，而你放大浏览器，虽然图片变大了，但是他在设备中的尺寸还依然是10px，这就是css像素，一种相对于设备独立像素的逻辑像素
css像素是使用的逻辑像素，相对设备独立像素。
假如一部iphone6，其设备物理像素 750 * 1334，iphone6 的设备独立像素 375 * 667，正好是设备物理像素的一半，也就是说css写的是1px，相对于的是375，iphone6手机上显示要是2px
1px解决方案
1.
缩放，兼容性问题
只支持ios8+设备。0.5px识别不了，无法兼容安卓设备、 iOS 8 以下设备（0）
2.border-image
用类似的1px图片做border图片
border-width: 0 0 1px 0; border-image: url(linenew.png) 0 0 2 0 stretch;
border-width: 1px 0; border-image: url(linenew.png) 2 0 stretch;
固定，有颜色还得换图
3.设置1px的渐变背景，50%有颜色，50%透明
.border {
background:
linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
}
4.CSS3 box-shadow
.shadow {
-webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
}
不建议，因为有两个像素
5.viewport结合rem解决像素比问题
比如在devicePixelRatio=2设置meta
在devicePixelRatio=3设置meta
1280) { docEl.style.fontSize = 170.66+ "px" } else { if (clientWidth < 640) { docEl.style.fontSize = 85.33 + "px" } else { if (clientWidth <= 1280 || clientWidth >= 640) { docEl.style.fontSize = (clientWidth / 750) * 100 + "px" } } } } }; if (!doc.addEventListener) { return } win.addEventListener(resizeEvt, recalc, false); doc.addEventListener("DOMContentLoaded", recalc, false) })(document, window);
6.伪类+缩放
.border-1px{
position: relative;
margin-bottom: 20px;
border:none;
}
.border-1px:after{
display :block ;
position :absolute;
bottom :0;
left :0 ;
width:100%;
border-top:1px solid $color;
content :' ';
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio:2)
.border-1px
&::after{
-webkit-transform:scaleY(0.5)
transform:scaleY(0.5);
}
如果你想加伪类需要再用嵌套伪类，frozenui用的就是这种方法，有兴趣的同学可以查看
7.PostCSS Write SVG
@svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } }
.example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; }
编译之后=>.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch; }
vw做移动端布局
https://www.w3cplus.com/mobile/vw-layout-in-vue.html
大漠老师的文章提到了vw做移动端布局，有兴趣的童鞋可以了解一下 ，100vw换算成100%的设备宽度，而唯一需要注意的就是如果你写的是margin-left：10vw的话，宽度会被撑大，所以需要你将容器的宽度calc(100vw-10vw);
为展示，代码做了编译，实际效果以及功能请结合实际为准
1、缩放实现物理 1px: |
|
2、线性渐变实现物理 1px: |
|
3.boxshadow实现 |
|
4.border-img实现 |
|
| |
| alt=""> | |
5.background-img实现 |
|
6.postcss Write svg插件 |
|