一 media媒体查询
- 用法: 用于为不同的媒体类型/设备应用不同的样式
由于移动端手机的屏幕大小不一致 所以通过媒体查询可以获取当前页面的大小
@media (查询条件){
选择器{
css样式}
}
当页面大小为980px时 将html根字体的字号设置为98px
@media (width:980px){
html{
font-size:98px;
}
}
当屏幕的宽度为375px时 将.box盒子背景颜色改为blue
@media(width:375px){
.box{
background-color:blue;
}
}
- 通常情况下 移动端的html根字体设置为页面宽度的1/10;
二 rem 相对单位:
语法: rem是相对于html根字号大小设置大小的 通常1rem= 根字号的大小
作用: ：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
例: 根字号大小为 75px 则1rem=75px; 根字号一般设置为屏幕宽度的1/102.2 flexible.js
- 是手淘开发出的一个用来适配移动端的js框架。 l
- 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
-----媒体查询+rem
----flexible+rem
2.2 vw+vh:
不需要引入任何的js文件 也不需要像rem一样去vscode配置字体大小
- 1vw= 视口宽度的1/100;1vh=1/100 视口高度
vw是一个可以直接拿来用的单位
例如: 375px设备 1vw=3.75px;
三 移动适配
-
3.1 基础插件
- px to rem 通过alt+z 快速将px固定像素转换为rem相对单位
- Easyless 插件---css的预处理插件 less sass stylus(语法格式不合理 )
-
3.2 easyless
css是一种非程式语言 没有变量函数作用域等概念,代码冗余度高 不便于维护,不能进行运算 ; 所以引入less等css预处理文件 ,但是浏览器是不认识.less文件 所以将.less文件编译后 在HTML页面中仍然还是引用.css文件
- 用法: 创建.less 文件 编写保存 会生成对应的.css文件
- 当出现重大语法错误 保存并不会生成对应的css文件
less注释语法:
- (1) 单行注释: '//一行代码' 这个不显示在css文件里 ctrl+/
- (2)多行注释: '/* 块级注释 */' 这个代码会显示在编译后的css文件里
shift+alt+a
运算
- 加 +,减 -, 乘 *,除 (a/b)
- 单位:
1 单位没有顺序之分 如果出现多个单位 以第一个单位为准
2. 运算符前后 要么都加空格 要么一个都不加
嵌套: 后代 子代 伪类 伪元素 交集 并集
-
3.21 后代选择器
less后代选择器语法
-
3.22 子代选择器
less子代选择器语法
-
3.23 交集选择器
less语法交集选择器
-
3.24 并集选择器:
image.png
-
3.25伪类选择器:
image.png
-
########32.6 伪元素
image.png -
3.3 变量:
- @变量名:变量值;
- 注意点: 变量名大小写敏感 不能以数字开头 不能有特殊字符
-
3.4 导入.less文件 @import
- 语法: 在.less页面中导入.less文件
- 格式:
(1) @import url();
(2) @import .less;
-
3.5 导出.less文件 //out:
- 语法: 导出对应的.css文件
- 格式:
(1) //out: '../css/'; : out: 后面是目标文件的保存路径
表示导出对应的css文件到当前目录的上一级文件夹--css文件夹中 如果没有会生成对应的css文件夹
注意:
- 如果 ../css/ 没有'/' 会把这个css当成生成.css文件的名称 而不是文件夹;
- ⭐⭐less 的配置文件一定要放在第一行
全局配置
settings.json文件 光标定位的位置 添加以下代码
"less.compile": {
"out":"../css/"
},
生成的.css文件会自动保存在当前文件的上级目录下的css文件下
-
3.6 禁止导出: //out:false
-
3.7 压缩导出: // compress:true
1.节约成本 让网页渲染更快,压缩的文件显示在同一行 行号只有1
