less与媒体查询

less的使用

1.可以定义变量并使用

@name(变量名): red(css属性);

2.可以进行数学运算，进行除法运算时要加括号

width: (200px / 2); //结果为100px

3.可以通过函数的方法进行公共样式的存放

.function() //.加函数名 {
    公共样式代码
}

4.可以根据html结构来进行嵌套

div {
    p{
        
    }
}
// 伪元素的书写
div {
    &::after {
        
    }
}

媒体查询

1.语法

@media 媒体类型 关键词 媒体特性 {
    //css代码
}
例
@media  screen and (min-width: 600px) {
    body {
        background-color: red;
    }
}
// 当页面宽度大于等于600px时，页面背景为红色

2.媒体类型

①all 所有设备

②print 用于打印机和打印预览

③screen 用于电脑屏幕、平板电脑、智能手机等

3.关键字：

①and 将多个媒体特性连接到一起

②not 排除某个媒体类型（可以省略）

③only 指定特定类型（可以省略）

4.媒体特性

①width 定义输出设备可视区域宽度

②min-width 定义最小宽度，相当于>=

③max-width 定义最大宽度，相当于<=