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;
}
注意:
● 运算符中间左右有空格隔开
● 对于两个不同的单位值之间的运算,运算结果的值取第一个值的单位
● 如果两个值之间只有一个值有单位,则运算结果就取该单位