rem布局
- 主要用于解决不同屏幕的适配问题，rem能够等比例适配所有屏幕
- 流式布局：虽然可以让各种屏幕都适配，但是显示效果不友好，只有较少的尺寸可以实现完美的效果（目前使用流式布局的公司较多：亚马逊，京东，携程）
- rem布局：rem能够适配所有的屏幕，与less配合使用效果较好（目前使用的公司：淘宝，苏宁）
rem是什么
- rem是指相对于根元素的字体大小的单位，是一个相对单位
- 使用px的地方都可以使用rem替换，1rem=html的font-size的大小
- 一旦html的font-size发生了改变，那么rem的大小也会发生改变
rem与高度自适应
- 因为rem的基准点是根元素html的字体大小，因此我们只需要设置不同屏幕的html的font-size的大小就可以达到适配的目的
媒体查询
- 媒体查询是css3提出的一个新的属性，通过媒体查询可以查询到screen的宽高，从而指定某个宽度区间的网页布局
语法：
@media screen and (条件) {
满足条件加载的css内容
}
条件说明：
- min-width：320px ； 最小宽为320（320以上的设备）
- max-width：640px；最大宽为640（640以下的设备）
- width：540px； 宽度等于540
注意点：
- 媒体查询仅仅提供一个条件，不会提升权重，所以一般媒体查询写在最下面
- and前后一定要有空格
rem与媒体查询
- 使用rem配合媒体查询可以适配多个终端
- px转rem的公式：px/html的font-size的值
- 动态计算不同屏幕的对应的font-size的值：当前屏幕/（设计图的宽/基于设计图的font-size）
举例：
750的设计图，50的font-size；要求写出375的屏幕
计算：750 / 50 = 375 / 当前屏幕对应的font-size
LESS
学习网站：官网http://lesscss.org/ 中文网http://lesscss.cn/
简介
- less本质上是一个超集，具备css的一切功能，同时具备css不具备的功能
- 浏览器不认识less，使用插件easy less，转译为css，引用css文件让浏览器识别、
安装插件（vscode）
点击扩展——搜索easy less——安装——重新加载——安装成功后，当我们编写less并保存的时候，会自动在当前目录下生成一个同名css文件
LESS语法
注释
- // less的注释，css文件用不了，生成的css文件中不会显示
- /* */ 属于css注释，因此会编译到css文件中
变量（可以变化的量，方便维护）
- 格式：@自定义变量名：对应的取值；
@mainColor: yellow;
.box {
color: @mainColor;
background-color: @mainColor;
border: 1px solid @mainColor;
}
嵌套（混入）
- 可以在一个选择器中嵌套另一个选择器来实现继承，可以减少代码量，是代码更加清晰
- 后代选择器 直接写在大括号里面即可
- 子代选择器 直接 > 即可
- 交集选择器 使用&符号，表示自己
- 并集选择器 直接使用 ，
- 伪类选择器 使用&符号表示自己，例如&::hover
-
伪元素选择器 使用&符号表示自己 （与伪类选择器一致）
image.png
less数学运算
- less可以支持运算
// less可以拥有计算能力
.box {
width: 100 + 200px;
height: 50 * 2px;
font-size: 320 / 15px;
}
less函数的使用
- 有一些公共类我们可以提取出来，用的时候调用
步骤
- 声明 .函数名（）{公共的css}
- 使用 .box{ .函数名(); };
特点：
- 函数不会被编译到css中
- 函数可以在选择器中调用
less函数的参数传递
- 参数的传递过程：调用函数的时候将函数小括号的值传递给函数里面的变量，如果调用函数的小括号里面没有值会使用默认值
// 声明函数
.br(@val: 20px) {//默认值写法@函数名：数值
/* 标准写法 */
border-radius: @val;
/* 私有前缀的写法 */
-webkit-border-radius: @val;
/* 私有前缀的写法 */
-ms-border-radius: @val;
/* 私有前缀的写法 */
-o-border-radius: @val;
/* 私有前缀的写法 */
-moz-border-radius: @val;
}
.box {
// 调用函数
.br(5px);
}
.box2 {
.br(10px);
}
引入less文件
- 一个页面需要引入多个css文件，现在我们在less文件中引入多个less文件，这样就可以在html页面只引入一个css文件
格式：
@import '需要引入的less文件的路径'；
