rem 适配布局 + LESS + 媒体查询
Posted qtbb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果。
以上是关于rem 适配布局 + LESS + 媒体查询的主要内容，如果未能解决你的问题，请参考以下文章