至于你说的在手机上看起来小于1px，可能是屏幕分辨率太高，所以1px比在电脑上看起来细。你可以自己设一个div，边框设1px，在那台手机上看一下是不是一样。比如说文字，14px在手机上就比电脑上看起来小。
如果上帝会用电脑，我想他也无法实现你的要求，求你放过他！1像素是显示器的最小物理显示单位，电脑硬件和软件都只能控制这个像素亮或者不亮，以及亮的时候是何种颜色呈现（每个像素又分三个小点，分别显示红绿蓝三原色，每个色有0~255共256种亮度，通过排列组合就可以呈现出256*256*256=1678万种颜色），但却不可能控制这个像素点一半亮一般不亮，或者90%亮10%不亮。也就是说显示器上显示的任何元素均不可能小于1像素！当然，软件也许可以按0.5像素来显示物体，但实际上出现在显示器的仍然是1像素的，反正肉眼也分辨不出来。
物理像素[设备像素] &逻辑像素[CSS 像素]
拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的0.5px就好了啊！ 试过了就知道，iOS 8+系统支持，安卓系统不支持。
在浏览器中无法设置小于 1px 的边框 设置了也不会生效
设计师要求的 1px 是指设备的物理像素 1px，而 CSS 里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用 javascript 中的 window.devicePixelRatio 来获取。当然，比例多少与设备相关。
移动端开发常需要在 html 的 header 里添加如下一句：
设备像素比 = 物理像素 / css 像素
核心思想就是设置 1px 大小 然后将 1px 缩小为 0.5px 来展示
IOS8 下已经支持带小数的 px 值, media query 对应 devicePixelRatio 有个查询值-webkit-min-device-pixel-ratio, css 可以写成这样
【缺点】对设备有要求，小数像素目前兼容性较差。
pixel-border.css 这个工具库就是用来解决移动端 1px 边框的问题，用到的思想和我下面写的一致
pixel-border.css
该方案是对上述方案的优化，整体思路就是利用 viewport + rem + js 动态的修改页面的缩放比例，实现小于 1 像素的显示。在页面初始化时，在头部引入原始默认状态如下：
接下来的任务就是 js 的动态修改缩放比 以及 实现 rem 根元素字体大小的设置。
【缺点】以为缩放涉及全局的 rem 单位，比较适合新项目，对于老项目可能要涉及到比较多的改动。
可能你会问为什么在3倍屏下，不是0.3333px 这样的？经过我测试，在Chrome上模拟iPhone 8Plus，发现小于0.46px的时候是显示不出来。
