移动端rem适配

1.移动端适配使用技术

. sass
. 单位rem

2.移动端设计稿转px

一般的移动端设计稿都是 750/1334 规格,浏览器的移动端浏览一般选择【苹果6/7/8】来进行适配,浏览器的展示的分辨率是375/667规格,进行转换的公式就是 750/2 =3751334/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>
本文由likel编写,转载请附带原文链接 https://sugarhope.com/544/
THE END
分享
二维码
打赏
< <上一篇
下一篇>>