less的基本用法

Rem,媒体查询适配方案
Less基础语法介绍
 作用: 维护CSS, 按照CSS的基本语法去写.
变量

☞@自定义变量名: 值;
    例如:
    @nav_bgcolor: red;
    nav {
        color: @nav_bgcolor;
    }

☞变量的运算:
    @width: 10;
    nav {
        width: @width * 3px;
    }

混合

☞ 定义一个公共的样式(可以式类选择的语法,可以是ID选择器的语法)

例如:
    .test() {
        width: 50px;
        height: 50px;
    }

    nav {
        调用样式
        .test();
    }

    header {
        .test();
    }

☞ 可以设置参数
例如:
.test(@width) {
    width: @width;
}

nav {
    .test(100px);
}


☞ 可以为参数设置默认值
例如:
.test(@width: 100px) {
    width: @width;
}
nav {
    .test();
}
header {
    .test(50px);
}

嵌套

例如:
nav {
    ul {
        li {

        }
    }
}

Less特点小结：

支持嵌套写法（结构清晰）
支持变量写法（维护方便）
支持函数写法（复用性强）
支持数学运算
媒体查询
什么是媒体查询?
1, 媒体指的就是各种设备(移动设备,PC设备)
2, 查询指的就是要检测属于哪种设备
总结:
    媒体查询:通过查询当前属于哪种设备,让网页能够在不同的设备下正常的预览

学习媒体查询的核心是什么?
实现页面在不同设备下正常预览.[判断当前设备]

媒体类型
 将不同的设备划分为不同的类型,称为媒体类型

all (所有的设备)
print (打印设备)
screen(电脑屏幕,平板电脑),智能手机
媒体特性
用来描述设备的特点,比如宽度,高度...

width    网页显示区域完全等于设置的宽度
height 网页显示区域完全等于设置的高度
max-width / max-height 网页显示区域小于等于设置的宽度
min-width / min-width 网页显示区域大于等于设置的宽度
orientation: portrait (竖屏模式) | landscape (横屏模式)
语法关键字
目的将媒体类型和媒体特性链接到一块,进行设备检测

and    可以将多个媒体特性链接到一块,相当于且
not 排除某个媒体特性 相当于非,可以省略
only 指定某个特定的媒体类型, 可以省略
语法
外联式语法

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">

内嵌式语法

@media only screen  and (max-width: 420px) {
    body {
        background-color: red;
    }
}

备注: 多个条件联写
@media only screen and (width: 320px) and (height: 568px) {}