移动端使用rem方法

1 在可以设置网页标题栏的页面写一个匹配手机的方法

<script>
       function resetWidth() {
            // 兼容ie浏览器 document.body.clientWidth
            var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
            console.log(baseWidth);
            // 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
            document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
        }
        resetWidth();
        window.addEventListener('resize', function () {
            resetWidth();
        })      
    </script>

　然后在html根目录设置默认大小

 box-sizing: border-box; //内边框

/* flex布局 */

.flex { display: flex; }

.jc-start { justify-content: flex-start; } //左对齐

.jc-center { justify-content: center; } //中间对齐

.jc-end { justify-content: flex-end; } //右对齐

.jc-sa { justify-content: space-around; } //左右两边对齐

.jc-sb { justify-content: space-between; } // 两端对齐

.fdc {

display: flex;

flex-direction: column; //垂直

}

.flex .fg1 { flex-grow: 1; }

.flex .fg2 { flex-grow: 2; }

.flex .fg3 { flex-grow: 3; }

.aic { align-items: center; } //子级上下居中

.fsb,

.fsa,

.fcc {

display: flex;

align-items: center; //子级上下居中

}

.fcc { justify-content: center; } //中间对齐

.fsb { justify-content: space-between; } //两端对齐

.fsa { justify-content: space-around; } // 左右对齐

.ifcc {

display: inline-flex;

justify-content: center;

align-items: center;

}