css媒体查询-高度自适应

用element写样式，宽度使用栅栏式动态布局

高度写一个自适应：

<style lang="less" scoped>
// 屏幕宽度大于768|默认768为移动端所以此时是PC端
    @media only screen and (min- 768px) {
        .collect-login {
            .login-main {
                margin: 60px auto 0;
            }
        }
    }
    // 屏幕宽度小于768|默认768为移动端
    @media only screen and (max- 768px) {
        .collect-login {
            .login-main {
                margin: 20px auto 0;
            }
        }
    }
</style>

好像惯例以宽度768为判定标准是否移动端

也可以使用JavaScript计算

created() {
        //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
        window.addEventListener("resize", this.getHeight);
        this.getHeight();
},
watch: {
        $route: function () {
                //监听路由是否变化
        },
},
methods: {
        //定义方法，获取高度减去头尾
        getHeight() {
                this.Marginheight = 0.05*window.innerHeight+ "px";
                console.log(this.Marginheight)
        }
},

再create的时候要，同时要监听resize事件