CSS学习笔记14——移动端相关知识（rem,媒体查询,less）
移动端
rem适配布局
rem单位
rem基准是相对于html元素的字体大小
- 父元素设定font-size，子元素根据rem缩放对应字体大小
媒体查询（Media Query）
@media可以针对不同屏幕尺寸设置不同样式- 当你重置浏览器大小过程中，页面也会根据浏览器宽度和高度重新渲染页面
@media mediatype and|not|only (media feature) {CSS-Code;
}
mediatype媒体类型
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印浏览 | |
| scree | 用于电脑屏幕，平板电脑，智能手机等 |
- 关键字 and not only 将多个媒体特性连接到一起作为媒体查询的条件
| 值 | 解释说明 |
|---|---|
| and | “且”可以将多个媒体特性连接到一起 |
| not | “非”排除某个媒体类型，可以省略 |
| only | 指定某个特定的媒体类型，可以省略 |
media feature媒体特性 必须有小括号包含
| 值 | 解释说明 |
|---|---|
| width | 定义输出设备中可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域的宽度 |
| max-width | 定义输出设备中页面最大可见区域的宽度 |
@media screen and (max-width:800px) {}
/*在屏幕上并且最大宽度是800像素 设置我们想要的样式*/
引入资源（使用两套css）
<link rel="stylesheet" media="mediatype and|not|only (media feature)" herf="mystylesheet.css"
Less基础
less变量
@变量名：值；
less编译
Easy less 插件把less文件编译为css文件
less嵌套
.header {width:200px;a {color:pink;&：hover {color:green;}}
}
如果遇见（交集|伪类|伪元素选择器）
- 内层选择器前面没有&符号，则它被解析为父选择器的后代
- 如果有&符号：被解析为父元素自身或父元素的伪类
less计算
- 运算符中间左右有个空格隔开
- 对于两个不同单位的值之间的运算，运算结果值取第一个值的单位
- 如果只有一个值有单位，运算结果取该单位