1.rem基础
rem单位
rem（root em）是一个相对单位，类似于em，em是相对于父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小
eg; html元素设置的字体大小为14px
所以 10rem=14*10px=140px
优点：
当屏幕变小时直接修改html元素的文字大小就可以直接改变使用rem单位的字体大小和元素宽高了
2.媒体查询
2.1介绍
媒体查询是CSS3新语法，通过限制条件来设置不同情况下元素的CSS样式
！！使用@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器的大小过程中，页面也会根据浏览器的宽度和高度重新渲染页面
2.2语法规范
注意事项：.用@media开头 注意@符号
-
mediatype 媒体类型
-
关键字 and not only
-
media feature 媒体特性 必须有小括号代替
mediatype 媒体类型
将不同的终端划分成不同的类型 成为媒体类型
关键字and not only
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
and 且
not 非
only 指定
media feature 媒体特性
写的时候尽量按照从小到大来写
例如：
/* 通过限制屏幕宽度来改变p的样式 */
@media screen and (max-width:800px) {
p {
width: 10em;
height: 10em;
background-color: pink;
}
}
@media screen and (min-width:800px) {
p {
width: 15em;
height: 15em;
background-color: skyblue;
}
}2.3媒体查询+rem实现元素动态大小变化
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.top {
width: 100%;
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
}
@media screen and (min-width:320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width:640px) {
html {
font-size: 100px;
}
}
</style>
<body>
<div class="top">购物车</div>
</body>
</html>2.4 引入资源（理解）
样式繁多时，可以针对不同的媒体引入不同的CSS文件
例如可以针对于大小屏准备两套不同的CSS文件，实现不同大小的不同布局方式
3.less基础
3.1 维护CSS的弊端
CSS是一门非程序式的语言，没有变量，函数，作用域等概念
缺点：需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
不方便维护复用
没有很好的计算能力
3.2 Less介绍
是一门CSS的扩展语言，也称为CSS预处理器
在CSS基础上加上程序式语言的特性
它引入了变量，Mixin，运算以及函数等功能，大大简化了CSS的编写和成本
常见的CSS预处理器：Sass Less Style
3.3 Less 使用
首先新建一个后缀名为less的文件，在这个less文件里面书写less语句
-less变量
-less编译
-less嵌套
-less运算
3.4 Less 变量
常见于CSS中的一些颜色和数值
语法： @变量名：值；
同时注意命名的规范性
例如：
@bgc: pink;
@fs: 14px;
div {
color: @bgc;
font-size: @fs;
}3.5 Less 编译
本质上less包含一套自定义的语法和解析器，用户根据这些语法定义自己的样式规则，通过解析器，编译生成对应的CSS文件
所以 我们需要把less文件，编译生成为CSS文件
使用vscode插件Easy Less 写好less文件之后，直接保存就会编译出对应的CSS文件
3.6 Less 嵌套
例如：
等于:
即：子元素的样式直接写到父元素里面就好啦
最终编译得到后代选择器，再编译，引入就可以了
有时候里面会嵌套伪类选择器或者伪元素或者交集选择器，不是后代关系，可以在这类选择器前面加上&
3.7 less 运算（重要）
任何数字，颜色或者变量都是可以参与运算的，就是less提供了
- - * / 运算
注意：
运算符左右两侧必须敲一个空格隔开
两个数参与运算，如果只有一个数有单位，结果以这个单位为准
两个数参与运算，如果都有不同的单位，结果以第一个单位为准
4. rem适配方案
当设备尺寸发生变化时，等比例适配当前设备
使用前面三个知识综合使用来实现等比例适配
1.按照设计稿与宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）
2.CSS中，设计稿元素的宽高，相对位置等取值，按照等比例换算为rem为单位的值
rem适配方案技术使用（市场主流）
技术方案1：
less
媒体查询
rem
技术方案2：(推荐）
flexible,js
rem
rem实际开发适配方案1
动态设置html标签font-size大小
元素大小取值方法！！！
rem实际开发适配方案2
flexible.js
---------------------end----------------------
标签：less,适配,布局,rem,media,媒体,CSS From： https://blog.csdn.net/2302_79866622/article/details/136987034