vue移动端屏幕适配详解

@if (unitless($px)) {
@return px2rem($px + 0px);
} @else if (unit($px) == rem) {
@return $px;
}
@return ($px / $base-font-size) * 1rem;
}
// 字体转换
@mixin font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}

css内使用

<style scoped lang='scss'>
 @import '../styles/common.scss';
 .content{
  width:px2rem(750); /*750为设计稿实际尺寸*/
  font-size:px2rem(20) /*20为设计稿实际尺寸*/
</style>

js内使用

export default {
 name:'test',
 data() {
  return {
  w:0;
  }
 },
 watch:{
  getWidth() {
   this.w=this.$getPX(500);
  }
  }
 },
 computed: {
  fun() {
  return (this.w/this.$getPX(500)*100).toFixed(2) + '';
  }
 }
 }

以上所述是小编给大家介绍的vue移动端屏幕适配详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！