本文链接： https://blog.csdn.net/qq_45043067/article/details/102726119

首先简单介绍一下rem布局的基础了解

rem布局，最为直观的效果，页面全部元素现实等比缩放，包括文字，盒子大小；

本篇文章中涉及三点

1. 媒体查询@media

2. less预编译处理器的详解

3. rem单位的详解

介绍开始啦！！！！

1.媒体查询语法与运用介绍

1.1：媒体查询可以响应屏幕的变化，根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示。

1.2：语法如下

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype该属性的意思是媒体的类型，也就是定义你要查询的是什么类型的设备，通常都是定义为screen（该属性的意思为电脑屏幕，平板电脑，与智能手机等）

@media screen and|not|only (media feature) {
    CSS-Code;
}//此时已经定义了媒体类型为屏幕

and|not|only这三个为关键字
and的意思为可以将多个媒体特性连接在一起，相当与是且的意思。
not意思为排除某个媒体类型，相当于非的意思。
only意思为指定某个特定的媒体类型，可以省略。
总结为可以只留下and其它两个都可以省略

@media screen and (media feature) {
    CSS-Code;
}//此时已经定义了媒体类型为屏幕以及省略了not与only

(media feature)为该媒体特性；
对于属性screen（屏幕）那么它的特性就为屏幕的宽（width）
我们可以进行以下设置

@media screen and (min-width:500px) {
    body {
        background-color: red;
    }
}此时我们设置了屏幕宽最小为500px，
当屏幕的宽大于或者等于500px的时候，那么body的背景颜色为red

2.less预编译处理器介绍

2.1 code编辑器下载插件

插件名叫Easy Less然后安装好
在这里插入图片描述

2.2 安装好插件后我们可以创建一个文件名.less文件

在这里插入图片描述

2.3 less的使用

我们在less文件里面输入css内容时，less文件变化并且自动实时往生成的同级目录下的css文件中注入

编译过的css代码

2.3.1 less的嵌套

父级{
	子级{
		子子{

		}
	}
}
//我们还可以使用后代选择器
例如：
#aa{
	color:red;
	>.b{
		color:blue;
		>.c{
			color:yellow;
		}
	}
}

2.3.2 less里面定义变量

比如我们可以在less中定义==@no：10；==

	@符号相当于js中的var，是变量的标志
	
	no是变量的名称，跟js的命名规范是一样的
	
	冒号表示赋值，类似js中的=
	
	10是变量的值，可以带单位 例如10rem，
	
 使用变量 @no
 
	因为变量可以带单位：变量是可以运算的，也就是说less支持运算
	
（没有变量也支持运算）

3.rem单位与语法计算介绍

3.1 rem单位介绍

首先我们要理解什么是rem？如何使用？
答：rem可以控制整个页面所有元素有关PX类，只要是你设置数值的地方都可以实现控制。
在rem里面1rem=HTML的font-size的大小

3.2 rem的计算

首先通过媒体查询获取当前屏幕的宽度，然后定义一个固定数为no（这个名字可以随意取），那么rem计算公式为rem=width（获取的当前的屏幕的宽）/ no（自己设置的固定数）可以参考以下代码，我们通过媒体查询监听屏幕不同的尺寸，然后只要屏幕宽度变化，那么HTML的大小也会跟随变化

@no: 10; //划分为10等分，我们可以划分为任意等分，通常划分为10等分

@media screen and (min-width: 750px) {
    html {
        min-width: 750px/@no;
        //当屏幕宽度为750px的时候1rem等于10px，所以750px就等于75rem
    }
}
@media screen and (min-width: 480px) {
    html {
        min-width: 480px/@no;
        //当屏幕宽度为480px的时候1rem等于10px，所以480px就等于75rem
    }
}

我们可以通过设置的屏幕宽来除以当前的rem值从而计算出在不同屏幕下HTML元素的大小，如下图所示
在这里插入图片描述
综合以上知识你就可以自己写一个跟随屏幕大小随意变换的网页啦！！！

感谢支持与阅读，谢谢！！！