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()
    })
    

Vue_rem响应式布局

上一篇:C# RSA加密解密


下一篇:windows下运行C程序,安装gcc