less 与 @media screen and ( .... )

在less 中使用媒体查询；

我们使用less 和媒体查询实现下面的功能：

当页面的宽度 > 500px 时，div 的背景颜色是绿色；当页面宽度<=500px 时，div的背景颜色显示红色；

.abc(@bcg){

width:200px;

height:200px;

background-color:@bcg;

}

div{

.abc(green)

}

@media screen and (max-width:500px){

div{

.abc(red)

}

}

上面的代码简单的实现了这个功能；