vue項目中頁面響應式佈局設計方案

針對全屏頁面開發，兼容 19201080，以及 1366768

1. js設置原型屬性$screen: 獲取當前是什麼屏幕

isS： 1366定義的最小屏幕
isM： 1366-1600的中間屏幕
isB： 1600以上的大屏

在主文件app.vue中設置：

let _w = window.innerWidth,
    _h = window.innerHeight,
    isS = false,
    isM = false,
    isB = false

    if(_w <= 1366) {
        isS = true
    }else if(_w >1366 &&_w <=1600){
        isM = true
    }else{
        isB = true
    }

Vue.prototype.$screen = { isS, isM, isB}

在其他頁面使用

this.$screen

2. css media公共方法: calcmedia

參數： @type： 屬性類型 對應着 height，width 的簡稱
@big： 1601-1920設置的值，
@mdidle： 1367-1600設置的值，如果不傳或者傳值爲0 則取big的值
@small： 小於1366設置的值，如果不傳或者傳值爲0 則取middle的值

less:

// 媒體查詢 方法
.calcmedia(@type, @big, @mdidle:0, @small: 0) {
    @media (max-width: 1366px) {

        @value:if((@small<=0), @big, @small);
        .setMedia(@type, @value)
    }

    @media (min-width: 1367px) and (max-width: 1600px) {

        @value:if((@mdidle<=0), @big, @mdidle);
        .setMedia(@type, @value)
    }

    @media (min-width: 1601px) and (max-width: 1920px) {

        .setMedia(@type, @big)
    }

}

.setMedia(@type, @value) when (@type="h"){
    height: @value
}

.setMedia(@type, @value) when (@type="w"){
    width: @value
}
.setMedia(@type, @value) when (@type="p"){
    padding: @value
}
.setMedia(@type, @value) when (@type="fz"){
    font-size: @value
}
.setMedia(@type, @value) when (@type="b"){
    bottom: @value
}
.setMedia(@type, @value) when (@type="lh"){
    line-height: @value
}