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
}