CSS之rem+less+媒体查询

一、rem基础

 - rem(root em)是一个相对单位，类似于em，em是父元素字体大小
 - 不同的是rem的基准是相对于html元素的字体元素
 - 例如：根元素html这只font-size=12px；非根元素设置width：2rem；则换成px表示24px
 

二、媒体查询

2-1.什么是媒体查询

媒体查询（Media Query）是CSS3新语法

 - 使用@miedia查询，可以针对不同的媒体类型定义不同的样式
 - @media可以针对不同的屏幕尺寸设置不同的样式
 - 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
 - 目前针对很多苹果手机，安卓手机，平板等设备都用得到媒体查询

2-2.语法规范

@media mediatype and|not|only(meida feature) {
        css-code
    }
    
 - 用media开头，注意@符号
 - mediatype 媒体查询
 - 关键字 and not only
 - meida feature 媒体特性 必须有小括号包含

2-2-1.mediatype查询类型

将不同的终端设备划分为不同的类型，称之为媒体类型

 1. all ===> 用于所有设备
 2. print ===> 用于打印机和打印预览
 3. scree ===> 用于电脑屏幕，平板电脑，智能手机等

2-2-2.关键字

关键字将媒体类型或者多个媒体特性连接到一起作为媒体查询的条件

 1. and ===> 可以将多个媒体特性连接到一起，相当于“且”的意思
 2. not ===> 排除某个媒体类型，相当于“非”的意思，可以省略
 3. only ===> 指定某个特定的媒体类型，可以省略

三、Less基础

3-1.less变量

// 1.定义一个myColor的变量
@color:red;
// 2.使用变量
body{
    background-color: @color;
}

3-2.less嵌套

如果遇见（交集|伪类|伪元素选择器）

 - 内层选择器的前面没有&符号，则它被解析为父选择器的后代
 - 如果有&符号，它就被解析为父元素自身或父元素的伪类

CSS写法

a:hover{
	color:red;
}

Less写法

a{
&:hover{
	color:red;
	}
}

3-3.less运算

body{
    height: 200px -100;
    width: 200px -100;
}

注意：

 - 乘号（*）和除号（/）的写法
 - 运算符中间左右有个空格隔开1px+5
 - 对于两个不同单位的单位的值之间的运算，运算结果的值取第一个值的单位
 - 如果两个值之间只有一个值有单位，则运算结果就该取该单位