rem 适配布局 + LESS + 媒体查询
1. rem 基础
rem 是一个相对单位,类似于 em ,em 是父元素字体大小。
em 是相对于父元素 的字体大小来说的
rem 是相对于 html 元素 字体大小来说的
rem 优点 就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制
比如:根元素(html )设置的 font-size=12px;非根元素设置 width:2rem;则换成px 表示 24px(12px*2rem)
2. 媒体查询(@media)
@media 可以针对不同的屏幕尺寸设置不同的样式
语法规范:
@media mediatype and | not | only (media feature){
CSS - Code;
}
- 用 @media 开头
- mediatype 媒体类型
all:用于所有设备,
print:用于打印机和打印预览,
screen:用于电脑屏幕,平板电脑,手机等
- 关键字 and not only
and:可以将多个媒体特性连接到一起,相当于“且”的意思
not:排除某个媒体类型,相当于“非”的意思,可以省略
only:指定某个特定的媒体类型,可以省略
- media feature 媒体特性 必须有小括号包含
width:定义输出设备中页面可见区域的宽度
max-width:定义输入设备中页面最大可见区域宽度
min-width:定义输入设备中页面最小可见区域宽度
案例:
@media screen and(max-width:500px){
body{
background:pink;
}
}
注意点:
1. screen 还有 and 必须带上,不能省略
2. 小括号中的 数字 后面必须跟单位,970px 这个 px 不能省略
3. 媒体查询最好的方法就是从小到大
3. 媒体查询 + rem 实现元素动态大小变化
rem 单位是跟着 html 来走的,有了 rem 页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询 + rem 就可以实现不同设备宽度,实现页面元素大小的动态变化
4. 引入资源(理解)
当样式比较繁多的时候,可以针对不同的媒体使用不同 stylesheet(样式表)。
原理,直接在 link 中判断设备的尺寸,然后引入不同的css文件。
语法规范:
<link rel = "stylesheet" media = "mediatype and | not | only (media feature)" href = " style.css" >
案例:
<link rel = "stylesheet" media = "screen and (min-width:320px)" href = " style320.css" >
<link rel = "stylesheet" media = "screen and (min-width:640px)" href = " style640.css" >
5. Less基础
Less 变量:变量是指没有固定的值,可以改变的,因为CSS中的一些颜色和数值等经常使用,样式后缀名.less 。
@变量名:值;
1. 变量名规范
- 必须有 @ 为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
案例:
@color:pink;// 定义变量
body{
color:@color; // 使用变量
}
2. 编译
通过vscode中的插件 Easy LESS 编译为 css 文件,只要保存一下 Less 文件,会自动生成 CSS文件
3. Less 嵌套
1.内层选择器的前面没有 & 符号,则它被解析为父选择器的后代
CSS中选择器嵌套:
#header .logo{
width:10px;
}
Less 嵌套写法:
#header{
.logo{
width:10px;
}
}
2. 如果有 & 符号,它就被解析为父元素自身或父元素的伪类(交集|伪类|伪元素选择器)
CSS中选择器嵌套:
a:hover{
color:red;
}
Less 嵌套写法:
a{
&:hover{
color:red;
}
}
3.Less 运算
less 中运算 可以使用 加(+),减(-),乘(*),除(/)四种运算
运算符中间左右有个空格隔开 1px + 5
对于两个值之间只有一个值有单位,则运算结果就取该单位
对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
案例:
@font:50px;
@border:5px +5;
div{
width:200px - 50;
height:200px * 2;
border:@border solid #ccc;
img{
width:82rem / @font; //1.65rem
}
}
6. rem + less + @media 开发
动态设置 html 标签 font-size 大小
① 假设设计稿是 750px
② 假设整个屏幕划分为 15 等分(划分标准不一,可以是20份,也可以是10份)
③ 每一份作为 html 字体大小,这里就是 50px
④ 在320px 设备的时候,字体大小为 320 / 15 就是21.33px
⑤ 用页面元素的大小 除以不同的 html 字体大小 会发现他们的比例还是相同的
⑥ 比如 以 750px 为标准设计稿
⑦ 一个 100*100像素的页面元素在 750 屏幕下,就是 100 / 50 转换为 rem 是 2rem * 2rem 比例是1:1
⑧ 320 屏幕下,html字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是1:1
⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果。