移动端rem适配

1.移动端适配使用技术

. sass

. 单位rem

2.移动端设计稿转px

一般的移动端设计稿都是 750/1334 规格，浏览器的移动端浏览一般选择【苹果6/7/8】来进行适配，浏览器的展示的分辨率是375/667规格,进行转换的公式就是 750/2 =375，1334/2=667。
举个例子:设计稿一个100px的正方形，但是在浏览器里面就是要50px

3.在vue项目里面使用

项目初始化的时候要搭配sass进行使用

//1.在app.vue的js区域添加，进行rem动态计算
document.addEventListener('DOMContentLoaded', () => {
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > 50 ? 50 : fontSize //设置字体最大不超过50
    const html = document.querySelector('html')
    html.style.fontSize = fontSize + 'px'
})

3.1手动计算rem是非常麻烦的，这里就使用到sass进行动态计算,在项目里面创建一个init.scss文件

//init.scss
$ratio: 375 / 10;

@function rem($px) { //动态计算
  @return $px / $ratio + rem;
}

//在需要rem动态响应的.vue文件导入
<style lang="scss" rel="stylesheet/scss" scoped>
    @import "../assets/scss/init.scss";

    div{
        width:rem(50); //设计稿100px/2 = 50px
        height:rem(50);
    }
</style>