使用 px2rem 的方法解决移动端适配的问题
在项目中创建文件名为px2rem.scss的文件,然后在项目中使用的时候把style的languge属性改为scss就可以使用了。使用方法简单,看一遍就知道怎么使用。
@function px2rem($px){
@return $px*320/$designWidth/20 + rem;
}
// 设置设计图的宽度
$designWidth : 750;
使用方法:
<style lang="scss">
h1 {
width: px2rem(100);
background-color: #c33;
}
</style>
直接用设计图的尺寸就可以了。