文章目录
一:rem
1:rem (root em)是一个相对单位,类似于em,
em是父元素字体大小。
rem的基准是相对于html元素的字体大小。
比如:
根元素(html)设置font-size=12px;
非根元素设置width:2rem;
则换成px表示就是24px。
【叽叽歪歪】
把页面中所有表示大小的单位都换成rem
把对应的设备宽度中设置一个合适的html标签的字体大小
二:媒体查询 Media Query
@media 可以针对不同的屏幕尺寸设置不同的样式
使用 @media 查询,可以针对不同的媒体类型定义不同的样式
/* 括号里的汉字仅做解释,与代码无关 */
@media mediatype(类型) and|not|only(关键字) (media feature)(媒体类型) {
CSS-Code;
}
2.1:类型
将不同的终端设备划分成不同的类型,称为媒体类型
属性 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
scree | 用于电脑屏幕,平板电脑,智能手机等 |
2.2:关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
属性 | 描述 |
---|---|
and | 可以将多个媒体特性连接到一起,相当于“且”的意思。 |
not | 排除某个媒体类型,相当于“非”的意思,可以省略。 |
onl | 指定某个特定的媒体类型,可以省略。 |
2.3:媒体特性
加小括号包含
属性 | 描述 |
---|---|
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域宽度 , ≥ ,大于等于 |
max-width | 定义输出设备中页面最大可见区域宽度, ≤ ,小于等于 |
三:rem+媒体查询
rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度,实现页面元素大小的动态变化
- 把
<html></html>
…写进@media screen …里面 - 引入资源
语法规范
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
四:less使用(建新文件,后缀.less)
Less (Leaner Style Sheets 的缩写) 是一门 CSS 扩展语言,也成为CSS预处理器。
4.1:less的变量
@变量名:值;
命名规则:
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
4.2:less的编译
本质上,Less 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则
最终会通过解析器,编译生成对应的 CSS 文件。
【叽叽歪歪】就是说建一个.less的文件,然后在里面写东西,保存的时候,软件会自动生成一个.css的同名文件。(有个插件)
☇Easy LESS 插件
.less→.css(转)→.html(引)
4.3:less嵌套
子元素样式直接写进父亲的 {} 里面
如果遇见 (交集|伪类|伪元素选择器)
- 内层选择器的前面没有 & 符号,则它被解析为父选择器的后代;
- 如果有 & 符号,它就被解析为父元素自身或父元素的伪类。
- > 子代 亲儿子
- & 上一层选择器
- 直接嵌套表示后代
4.4:less运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
- 乘号(*)和除号(/)的写法
- 运算符中间左右有个空格
- 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位,则运算结果就取该单位