移动端开发日常问题汇总（持更）

1、视口约束

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=0">

2、rem布局

//rem适配
function changeRootFont() {
    var htmlE = document.getElementsByTagName('html')[0];
    var bodyWidth = document.documentElement.clientWidth || document.body.clientWidth;
    var designWidth = 750, rem2px = 100;
    htmlE.style.fontSize = ((bodyWidth / designWidth) * rem2px) + 'px';
}
changeRootFont();
window.addEventListener('resize', changeRootFont,false);

3、用scss mixin定义flex

@mixin flex($justify:flex-start,$align:center){
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-justify-content:$justify;
    justify-content:$justify;
    -webkit-align-items:$align;
    align-items:$align;
}

4、iconfont的使用，先全局引入iconfont-css样式，随后只需要引入样式图标类名就行

<link rel="stylesheet" href="//at.alicdn.com/t/font_280648_z7tocj59bqr.css">

<router-link to="/personalCenter"><span>我</span><span class="iconfont icon-gerenzhongxin"></span></router-link>

5、移动端1px

@mixin line1px($color:#ddd){
    position: relative;
    &:after{ 
        content: " "; 
        position: absolute; 
        left: 0; 
        bottom: 0; 
        width: 100%; 
        height: 1px; 
        background-image: -webkit-linear-gradient(0deg, $color 50%, transparent 50%); 
        background-image: -moz-linear-gradient(0deg, $color 50%, transparent 50%); 
        background-image: -ms-linear-gradient(0deg, $color 50%, transparent 50%); 
        background-image: -o-linear-gradient(0deg, $color 50%, transparent 50%); 
        background-image: linear-gradient(0deg, $color 50%, transparent 50%);
    }
}