移动Web开发——rem适配布局（五）

rem适配布局（五）

学习目标

（1）能够使用rem单位

（2）能够使用媒体查询的基本语法

（3）能够使用Less的基本语法

（4）能够使用Less中的嵌套

（5）能够使用Less中的运算

（6）能够使用2种rem适配方案

（7）能够独立完成苏宁移动端首页

1.Less变量

@变量名: 值;

1.变量名规范

● 必须有@为前缀

● 不能包含特殊字符

● 不能以数字开头

● 大小写敏感

2.Less 编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

需要把我们的 less 文件编译成为CSS文件，我们的html页面才能使用

要用到less编译插件（编译器内下载安装）

3.Less嵌套

例子
Less 代码

#header{
	.logo{
		width: 300px;
	}
}

CSS 代码

#header .logo {
  width: 300px;
}

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

内层选择器的前面没有&符号，则它被解析为父选择器的后代

如果有&符号，它就被解析为父元素自身或父元素的伪类

例子
Less 代码

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

CSS 代码

a:hover {
  color: blue;
}

4.Less运算 ★

任何数字、颜色或者变量都可以参与运算。Less提供了 + - * / 算术运算

Less代码里面写

@width: 15px + 5;
div{
	border: @width solid red;
}

CSS显示

div {
  border: 20px solid red;
}

注意：
● 运算符中间左右有空格隔开
● 对于两个不同的单位值之间的运算，运算结果的值取第一个值的单位
● 如果两个值之间只有一个值有单位，则运算结果就取该单位