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

cvper

于 2018-04-22 21:23:39 发布

阅读量8.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： less 文章标签： less 媒体查询 @media screen and

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80031913

less 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用LESS预处理器和媒体查询实现响应式设计的例子。当屏幕宽度大于500px时，div元素背景变为绿色；小于等于500px时，背景变为红色。通过LESS变量和函数提高样式维护效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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)   
    }
}

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