Vue_rem响应式布局

Vue_rem响应式布局

---

1. 将页面开发时的长和宽作为固定值记录挂载在Vue.vue页面下。

   methods: {	//封装响应式单位
       auto() {
           let h = 722.0	//开发时的高
           let nh = document.documentElement.clientHeight	//当前页面的高
           let rh = nh / h	//获得比例
           let w = 1536.0	//开发时的宽
           let nw = document.documentElement.clientWidth	//当前页面的宽
           let rw = nw / w	//获得比例
           //宽和高的比例都可以，这里看你的需求
           document.getElementsByTagName("html")[0].style.fontSize = 16 * rw + "px"
           //设置字体，此时的单位 1rem=16*页面比例 px
       }
   },
   mounted() {	//挂载此响应比例
       setInterval(()=>{this.auto()},0)
   }
   

2. 设置页面meta，禁止用户缩放。src/router/index.js中

   const routes = [
       {
           path: '/test',
           component: () => import('../views/test'),
           meta: {
           //设置属性值，禁止用户缩放
               userScalable: "0",
               name : "viewport",
               content :"width=device-width"
   	    }
       }
   ]
   //路由拦截
   router.beforeEach((to, from, next) => {
       //获取head标签
       let head = document.getElementsByTagName('head');
       //生成meta元素
       let meta = document.createElement('meta');
       //添加meta属性
       meta.name = to.meta.name;
       meta.userScalable = to.meta.userScalable
       meta.content = to.meta.content
       //向head添加子元素
       head[0].appendChild(meta);
       //放行
       next()
   })