一、今日学习内容：
- 什么是rem
- rem（root em）是一个相对单位，和em不同的是rem相对基准是对于html元素的字体大小来说的
- 比如：
- html设置的字体大小font-size:12px; 非根元素设置的具体的单位是 width:2rem; 换算成px单位就是24px。
- 优点：
- 父元素的字体大小可能不一样，但是整个页面只有一个html标签，可以很好的控制整个页面的元素大小。
- 媒体查询
- 什么是媒体查询
- 使用 @media 来进行查询，可以针对不同的媒体类型定义不同的样式
- 媒体查询的语法规范
- 关键字 and not only
- not：相当于非的意思，排除某个媒体类型（可以省略）
- only：相当于只有的意思，指定某个特定媒体类型（可以省略）
- media feature 媒体特性，在小括号中书写
- min-width：定义输出设备中页面最小可见区域的宽度
- max-width：定义输出设备中页面最大可见区域的宽度
- @media mediatype and/not/only （media feature）{ css-code}；
- LESS
- 维护CSS的弊端
- CSS是一门非程序式语言，没有变量、函数、作用域的概念。
- CSS书写的时候会写大量的看似没哟逻辑代码，冗余程度比较高。
- Less介绍
- less是一门css扩展语言，也称为css预处理器
- 作为css的一种形式的扩展，它并没有减少css的功能，而且在现有的css语法上，为其增加了程序式语言的特性。
- Less的编译
- 下载插件Easy Less 将 less文件编译为css文件
- Less的运算
- 基本的运算符有：加（+）、减（-）、乘（*）、除（/）
- 语法规范：
- 对于两个不同的单位的值之间的运算，运算结果取前面的值的单位
- 如果两个参与计算的数值，只有一个值有单位，那么就用有单位的值的单位
- Rem的适配方案
- less+rem+媒体查询
- 原理
- 让一些不能等比例自适应的元素，达到不同的尺寸时，根据html字体的大小变化来用rem作为单位，控制元素进行自适应变化。
- rem的实际开发适配方案
- ②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
- ④那么在320px设备的时候，字体大小为320/15就是 21.33px
- ⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
- ⑦一个100*100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem*2rem 比例是1比1
- ⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是42.66 但是宽和高的比例还是 1比1
- ⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
- 总结：
- 公式：页面元素的rem值 = 页面元素的px值 / html 的字体大小
- html的字体大小 = 屏幕的宽度 / 划分的份数
- flexible.js+rem
- flexble.js+rem适配方案
- 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
- 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
- 我们要做的，就是确定好我们当前设备的html 文字大小就可以了
- 比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
- 里面页面元素rem值： 页面元素的px 值 / 75 剩余的，让flexible.js来去算
- 下载css rem插件并且设置VScode的字体为75px（vscode的默认字体大小是16px，所以必须先进行设置）
|
