rem布局
什么是rem
rem（root em）是一个相对单位，与em不同的是rem相对于基准是对于html元素的字体大小来说的
比如
html设置的字体大小font-size：12px；非根元素设置的具体单位是width：2em，换算成px单位是24px
优点
父元素的字体大小可能不一致，但是整个页面只有一个html标签，可以很好的控制整个页面的元素大小
什么是媒体查询
什么是媒体查询
1、媒体查询是CSS3的新语法
2、使用@media来进行查询，可以针对不同的媒体类型定义不同的样式
3、也可以根据不通的屏幕尺寸设定不同的样式
媒体查询的语法规范
1、用@media来进行开头
2、mediatype媒体类型
1、all：用于所有设备
2、print：用于打印设备或打印预览
3、screen：用于电脑屏幕。平板电脑或手机等
3、关键字 and not only
1、and：相当于且的意思，将多个多媒体特性链接在一起
2、not：相当于非的意思，排除某个媒体类型
3、only：相当于只有的意思，指定某个特定媒体类型
4、media feature 媒体特性，在小括号中书写
1、width：定义输出设备中页面的可见区域宽度
2、min-width：定义输出设备中页面最小可见区域的宽度
3、max-width：定义输出设备中页面最大可见区域的宽度
5、@media mediatype and/not/only(media feature) {css-code}
LESS
维护css的弊端
1、css是一门非程序式语言，没有变量、函数、作用域的概念
2、css书写时，会写大量的看似没有逻辑代码，冗余程度比较高
3、不方便扩展和复用
4、css没有恨到的计算能力
LESS介绍
less是一门css的扩展语言，也成为css预处理器
作为css的一种形式的扩展，它并没有减少css的功能，而且在现有的css语法上，为其增加了程序式语言的特性
常见的css预处理器
sass、less、stylus等
less编译
下载插件easy less将less文件编译为css文件
less嵌套
less的运算
任何的数字。颜色或者变量都可以参与运算
基本的运算符有：加+减-乘除/
语法规范:
运算符左右两边，用空格隔开
对于两个不同的单位的值，之间的运算，运算结果取前面值的单位
对于两个参与计算的值，只有一个值有单位之间的运算，运算结果取有单位的单位
注意除法运算要加括号()
REM的适配方案
less+rem+媒体查询
原理
让一些不能等比例自适应的元素，达到不同的尺寸时，根据html字体的大小变化来作为rem作为单位，控制元素进行自适应变化
rem的实际开发适配方案
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③每一份作为html字体大小，这里就是50px
④那么在320px设备的时候，字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是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，所以必须先进行设置）
|
