vue部分页面重置rem比例

Posted mr-rshare

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue部分页面重置rem比例相关的知识,希望对你有一定的参考价值。

项目情况:

  mobile、pc在同一个项目中,希望mobile项目引入重置rem比例的文件

缺点:

  每个mobile的页面都需要引入、希望有大神知道怎么解决

1.新建rem.js文件

export function resetRem () {
   let html = document.documentElement;
   html.style.fontSize = 100 * (html.clientWidth / 750) + ‘px‘;
   // 监听 window 的 resize 事件.在浏览器窗口变化时再设置下区域高度.
   window.onresize = () => {
       let html = document.documentElement;
       html.style.fontSize = 100 * (html.clientWidth / 750) + ‘px‘;
   };
}

2.对应的mobile页面引入 并执行

import { resetRem } from ‘@/utils/rem‘
export default {
    name: ‘mFrame‘,
    created() {
        resetRem();
    },
}

 

以上是关于vue部分页面重置rem比例的主要内容,如果未能解决你的问题,请参考以下文章

vue 750的设计图如何用rem布局

css:chorm调试工具(修改样式重置缩放比例错误提示)

css:chorm调试工具(修改样式重置缩放比例错误提示)

移动APP中rem适配

Vue:将px转化为rem,适配移动端

60.Vue:将px转化为rem,适配移动端