移动端页面宽度

  -   设置了initial-scale, 则页面布局宽度 = 设备逻辑像素宽度 * 像素比dpr, 也等于 设备逻辑像素宽度 (device-width) /  initial-scale；
      然后再缩放initial-scale, 达到与设备同宽,但布局宽度不变; 
  -   设置了width则宽度等于width的值；同时设置了initial-scale和width则宽度取两者中较大的一个。

1px的实现

https://www.cnblogs.com/lunarorbitx/p/5287309.html\

0.5px解决方案 ------- 安卓和iOS7之前版本碰到0.5px直接就解析成0px了,大多数安卓机兼容性有问题, 此法不能用 ;

box-shadow ------ 这个颜色不好弄，所以效果也不是很好。

border-image ------  代码挺简单，但是要自己制作图片，而且圆角也不好弄，如果改了颜色就要对图片处理，所以不是很好的方案。

多背景渐变实现 ---------- 与border-image类似, 只是将图片替换为css3渐变。设置1px的渐变背景，50%有颜色，50%透明. 兼容性较好

transform: scale(0.5)  ------ WeUI正在用的; :before, :after与transform,  之前说的frozenUI的圆角边框就是采用这种方式, 
构建1个伪元素, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%.

viewport+rem实现:  --------- 利用像素比dpr 和 initial-scale , 将页面宽度设为 逻辑宽度 * dpr , 页面上的1px再缩放 initial-scale ,
就能得到标准的物理 1px,  此方法对安卓兼容不是太好;

flexible.js -----  px和rem相互转换的计算方法会暴露在window.lib.flexible中. 这样可以为less/sass编写宏方法. 具体的css改写方法
参照大 漠的文章
实际项目中特别指出了为了防止字体模糊, 出现奇数字号的字体, 字体的实际单位还是要以px为单位
缺点: 不适用安卓, flexible内部做了检测 非iOS机型还是采用传统的scale=1.0, 原因在于安卓手机不一定有devicePixelRatio属性, 
就算有也不一定能响应scale小于1的viewport缩放设置, 例如我的手机设置了scale=0.33333333, 显示的结果也与scale=1无异.

背景渐变实现 1px

.background-gradient-1px {
  background:
    linear-gradient(#000, #000 100%, transparent 100%) left / 1px 100% no-repeat,
    linear-gradient(#000, #000 100%, transparent 100%) right / 1px 100% no-repeat,
    linear-gradient(#000,#000 100%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(#000,#000 100%, transparent 100%) bottom / 100% 1px no-repeat}/* 或者 */.background-gradient-1px{
  background:
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) left / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) right / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) top / 100% 1px no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) bottom / 100% 1px no-repeat}

:before, :after与transform 实现 1px
需要注意<input type="button">是没有:before, :after伪元素的

.radius-border{
    position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
    .radius-border:before{
        content: "";
        pointer-events: none; /* 防止点击触发 */
        box-sizing: border-box;
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0;
        border-radius: 8px;
        border:1px solid #999;
        -webkit-transform(scale(0.5));
        -webkit-transform-origin: 0 0;
        transform(scale(0.5));
        transform-origin: 0 0;
    }
}