移动端开发的适配和1px问题：

移动端开发适配：

让前端开发者的代码在不同手机屏幕下展示相同的效果：

1.媒体查询：

/* 适配 */
@media only screen and (min-width: 320px) {
    html {
        font-size: 17.066666px !important;
    }
}
@media only screen and (min-width: 360px) {
    html {
        font-size: 19.2px !important;
    }
}
@media only screen and (min-width: 375px) {
    html {
        font-size: 20px !important;
    }
}
 
@media only screen and (min-width: 400px) {
    html {
        font-size: 21.33333333px !important;
    }
}
@media only screen and (min-width: 412px) {
    html {
        font-size: 21.97333px !important;
    }
}
@media only screen and (min-width: 414px) {
    html {
        font-size: 22.08px !important;
    }
}
 
@media only screen and (min-width: 480px) {
    html {
        font-size: 25.6px !important;
    }
}
@media only screen and (min-width: 768px) {
    html {
        font-size: 40.96px !important;
    }
}

2.js 适配：

 <script>
   		 window.onload = function(){
             getRem(720,100)      /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是 为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
       		  }; 
             window.onresize = function(){
             getRem(720,100)
             };
             function getRem(pwidth,prem){
               var html = document.getElementsByTagName("html")[0];
               var oWidth = document.body.clientWidth || 	document.documentElement.clientWidth;
                html.style.fontSize = oWidth/pwidth*prem + "px";
    }
  </script>

---

移动端开发中1px问题：

iphone6的屏幕宽度为375px，设计师做的视觉稿一般是750px，也就是2x，这个时候设计师在视觉稿上画了1px的边框，于是你就写了“border-width:1px”，so…1px边框问题产生了。
为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的。viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。

解决方案：

1.用小数写边框：媒体查询，加小数的写法
缺点: 安卓与低版本IOS不适用

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

2.box-shadow利用阴影来模拟边框：

.border-1px{
  box-shadow: 0px 0px 1px 0px red inset;
}

3.border-image
使用图片将图片的“border-image-slice”设为2，那么实际上边框有一半是透明的，即可得到我们想要的“1px边框”。

<style>
.test{
    border: 1px solid transparent;
    border-image: url('./border-1px.png') 2 repeat;
}
</style>
<div class="test">
    1像素边框
</div>

4.background渐变
背景渐变, 渐变在透明色和边框色中间分割, frozenUI用的就是这种方法, 借用它的上边框写法：

@media screen and (-webkit-min-device-pixel-ratio: 2){
    .ui-border-t {
        background-position: left top;
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0));
    }
}

缺点: 代码量大, 而且需要针对不同边框结构, frozenUI就定义9种基本样式，而且这只是背景, 这样做出来的边框实际是在原本的border空间内部的, 如果元素背景色有变化的样式, 边框线也会消失。 最后不能适应圆角样式
5.:before, :after与transform
构建1个伪元素, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%.

.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;
    }
}

需要注意是没有:before, :after伪元素的
优点: 其实不止是圆角, 其他的边框也可以这样做出来
缺点: 代码量也很大, 占据了伪元素, 容易引起冲突