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>
