Less响应式布局配置

Sass有强大的@content关键字，可以配合@mixin混合宏，使用include关键字来做响应式布局。

然而，Less不支持@comtent关键字。于是做了以下配置：

//width
.smallest(@width){
    @media (min-width: 300px)and (max-width: 767px){
        width:@width;
    }
};
.smaller(@width){
    @media (min-width: 768px)and (max-width: 1023px){
        width:@width;
    }
};
.small(@width){
    @media (min-width: 1024px)and (max-width: 1279px){
        width:@width;
    }
};
.normal(@width){
    @media (min-width: 1280px)and (max-width: 1679px){
        width:@width;
    }
};
.large(@width){
    @media (min-width: 1680px){
        width:@width;
    }
};
//height
.smallestHeight(@height){
    @media (min-width: 300px)and (max-width: 767px){
        height:@height;
    }
};
.smallerHeight(@heighth){
    @media (min-width: 768px)and (max-width: 1023px){
        height:@height;
    }
};
.smallHeight(@height){
    @media (min-width: 1024px)and (max-width: 1279px){
        height:@height;
    }
};
.normalHeight(@height){
    @media (min-width: 1280px)and (max-width: 1679px){
        height:@height;
    }
};
.largeHeight(@height){
    @media (min-width: 1680px){
        height:@height;
    }
};
//picURL
.smallestUrl(@url){
    @media (min-width: 300px)and (max-width: 767px){
        background-image: url($url);
    }
};
.smallerUrl(@url){
    @media (min-width: 768px)and (max-width: 1023px){
        background-image: url($url);
    }
};
.smallUrl(@url){
    @media (min-width: 1024px)and (max-width: 1279px){
        background-image: url($url);
    }
};
.normalUrl(@url){
    @media (min-width: 1280px)and (max-width: 1679px){
        background-image: url($url);
    }
};
.largeUrl(@url){
    @media (min-width: 1680px){
        background-image: url($url);
    }
};

　　

使用：

//页面居中容器
.wrap{
    margin:0 auto;
    .smallest(100%);
    .smaller(100%);
    .small(1000px);
    .normal(1200px);
    .large(1200px);
}

　　

 

转载于:https://www.cnblogs.com/grt322/articles/9354611.html