css媒體查詢-高度自適應

用element寫樣式，寬度使用柵欄式動態布局

高度寫一個自適應：

<style lang="less" scoped>
// 屏幕寬度大於768|默認768為移動端所以此時是PC端
    @media only screen and (min-width: 768px) {
        .collect-login {
            .login-main {
                margin: 60px auto 0;
            }
        }
    }
    // 屏幕寬度小於768|默認768為移動端
    @media only screen and (max-width: 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事件