一、rem
rem单位
rem (root em)是一个相对单位,类似于em,em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
使用流程:
- 确定html根标签的font-size设置为屏幕宽度(逻辑像素)的10分之1(这个10分之1就是rem与px的比例)
- 根据比例将px转换为rem
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
二、媒体查询
什么是媒体查询
👉 媒体查询(Media Query)是CSS3新语法。
- 使用 @media查询,可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询
媒体查询语法规范
- 用
@media开头
注意@符号 - mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性必须有小括号包含
@media mediatype and|not|only (media feature) {
CSS-Code;
}
1.mediatype 查询类型
👉 不同的终端设备划分成不同的类型,称为媒体类型
2.关键字
👉 关键字
将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
- and:可以将多个媒体特性连接到一起,相当于“且”的意思。
- not:排除某个媒体类型,相当于“非”的意思,可以省略。
- only:指定某个特定的媒体类型,可以省略。
3.媒体特性
👉 每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。
三、less基础
👉 Less是一门 CSS 预处理语言,它扩展了CSS的动态特性。
1.less变量
👉 变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名:值;
注意:
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
2.Less 嵌套
👉 在父元素样式里面写子元素样式
// 将css改为less
#header .logo {
width: 300px;
}
#header {
.logo {
width: 300px;
}
}
注意:若在子元素或者父元素中遇见 交集、伪类、伪元素选择器,请利用&进行连接
a:hover{
color:red;
}
a{
&:hover{
color:red;
}
}
3.Less运算
👉 任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
/*Less 里面写*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
注意:
- 乘号(*)和除号(/)的写法
- 运算符中间左右有个空格隔开 1px + 5
- 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位,则运算结果就取该单位