移动端样式注意问题

文字大小：

@media screen and (min-width: 300px) {
  html {
    font-size: 27.77783333333333px;
  }
}
@media screen and (min-width: 315px) {
  html {
    font-size: 29.166724999999996px;
  }
}
@media screen and (min-width: 330px) {
  html {
    font-size: 30.555616666666666px;
  }
}
@media screen and (min-width: 345px) {
  html {
    font-size: 31.94450833333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 33.3334px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 34.72229166666666px;
  }
}
@media screen and (min-width: 390px) {
  html {
    font-size: 36.11118333333333px;
  }
}
@media screen and (min-width: 405px) {
  html {
    font-size: 37.500074999999995px;
  }
}
@media screen and (min-width: 420px) {
  html {
    font-size: 38.88896666666666px;
  }
}
@media screen and (min-width: 435px) {
  html {
    font-size: 40.27785833333333px;
  }
}

文字间距：

 单行：line-height:1;----避免在计算margin的时候在计算下图中绿色空白部分的高度

 多行：有line-height时

文字行高：（文字大小+标注margin高度）/100 

两端对齐：

text-align：justfy

移动端一像素border

.border-1px, .top-1px, .bottom-1px{  position:relative}
.border-1px{  overflow:visible;    border-radius: 10px;}
@media screen and (-webkit-min-device-pixel-ratio:1) {
    .top-1px:before, .bottom-1px::after{
    content: '';
    position:absolute;
    left: 0px;
     right: 0px;
     height: 1px;
     width:100%;
    background: #d8d8d8;
    transform:scale(1);
    transform-origin :left top;
    }
    .bottom-1px::after{
    bottom:0;}
    .top-1px:before{
     top: 0;
    }
    .border-1px::before{
    content: ''
    width:100%
    height: 100%
    border:1px solid #ccc
    position:absolute ;
        left:0;
    top: 0;
        border-radius: 10px;
    }
}
    @media screen and (-webkit-min-device-pixel-ratio:2){
        .top-1px:before, .bottom-1px::after{
        content :'';
        position:absolute;
        left:0px;
        right:0px;
        height:1px;
        width :200%;
        background :#d8d8d8;
        transform:scale(0.5);
        transform-origin:left top;
        }
        .bottom-1px::after{
        bottom:0;
        transform-origin:left bottom;
        }
        .top-1px:before{
        top:0;
        }
        .border-1px::before{
        content:'';
        width :200%;
        height: 200%;
        border: 1px solid #ccc;
        position: absolute;
        left: 0;
        top: 0;
        transform: scale(.5);
        transform-origin: left top;
            border-radius: 10px;
        }
    }
        @media screen and (-webkit-min-device-pixel-ratio:3){
            .top-1px:before, .bottom-1px::after{
            content:'';
            position :absolute
            left: 0px;
            right: 0px ;
            height: 1px;
            width: 300%;
            background: #d8d8d8;
            transform :scale(0.333);
            transform-origin: left top;
            }
            .bottom-1px::after{
            bottom: 0;
            transform-origin: left bottom;
            }
            .top-1px::before {
                top: 0;
            }
            .border-1px::before {
                content :'' ;
                width: 300%; height: 300%; border: 1px solid #ccc; position: absolute; left: 0; top: 0 ;transform: scale(.333334) ;transform-origin: left top;
                border-radius: 10px;
            }
        }

两端对齐IE不兼容

text-align：justify

*text-justify:inter-ideograph;