vue学习第24天 移动WEB开发------ rem适配布局
目标：
1）能够使用rem单位
2）能够使用媒体查询的基本语法
3）能够使用Less的基本语法
4）能够使用Less中的嵌套
5）能够使用Less中的运算
6）能够使用2中rem适配方案
7）能够独立完成xx移动端首页
思考：
1、页面布局文字随屏幕大小变化而变化
2、流式布局和flex布局主要针对于宽度布局，现在针对于高度设置rem适配布局
3、在屏幕发生变化时 元素高度和宽度等比例缩放
rem基础
rem单位 以html 的font-size 尺寸做为单位，配合媒体查询设置
1）常见的单位： px（css像素）、em（以字符尺寸为单位）、pm 、 【绝对单位】cm(厘米)、mm(毫米)
2）rem（root em） 是一个相对单位，类似于em， em是父亲元素字体大小
3）不同的是rem 的基准是相对于html元素的字体大小。
4）根元素（html）设置font-size=12px；非根元素设置width：2rem； 相当于width：24px.
5）rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
媒体查询
1、什么是媒体查询
媒体查询**（Media Query） 是CSS3的新语法。
1）使用 @media 查询，可以针对不同的媒体类型定义不同的样式（类似于动画的使用）
2）@media 可以针对不同的屏幕尺寸设置不同的样式
3）当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度 重新渲染页面
4）目前针对很多苹果手机、Android手机、平板等设备都用的到多媒体查询
2、语法规范
1）mediatype 查询类型
将不同的终端设备划分成不同的类型，称为媒体类型（screen）
2）关键字
关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件
a）and：可以将多个媒体特性连接到一起，相当于“且”的意思
b）not：排除某个媒体类型，相当于"非"的意思，可以省略
c）only：指定某个特定的媒体类型，可以省路
3）媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。
注意：媒体特性写在小括号里、 设置min 或 max 都包含 相等的情况
3、媒体查询 + rem 实现元素动态大小变化
1）rem单位是跟看html变化的，有了rem，页面元素可以设置不同大小尺寸
2）媒体查询可以根据不同设备宽度来修改样式
3）媒体查询 + rem 就可以实现不同设备宽度，实现页面元素大小的动态变化
4、引入资源（理解）
1）当样式比较繁多的时候，我们可以针对不同的媒体使用不司stylesheets（样式表）。
2）原理，就是直接往link中判断设备的尺寸 ，然后引用不同的css文件。
语法：
Less基础
css写法的升级，并快速生成css文件
1、维护CSS的弊端
CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
2、Less介绍
3、Less安装
1）安装nodejs，选择新版本，网址：http:l/nodejs.cn/dawnloadl
2）检查是否安装成功，命令〞node -v〞查看版本即可
3）基于nodejs在线安装Less，使用cmd命令 “npm install -g less ”
4）检查是否安装成功，使用cmd命令“lessc-v〞 查看版本即可
Less基础
Less使用: 我们首先新建一个后级名为less的文件，在这个ess文件里面书写less 语句。
1）Less变量
2）Less编译
3）Less嵌套
4）Less运算
4、Less变量
变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
变量命名规范： @变量名： 值
1）必须@作为前缀
2）不能包含特殊字符
3）不能以数字开头
4）大小写敏感
5、Less编译
vscode Less插件（Easy LESS插件： 可以把 Less文件 编译为 css文件）
6、Less 嵌套
子元素的样式直接写在 父元素样式的 大括号内
注意：
7、Less 运算（重点***）
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（＋）、减（-）、乘（*）、除（/）算术运算。
注意：颜色也可以计算
rem适配方案
思考：
1）适配的目标
2）如何达到目标
3）实际开发中如何使用
rem适配方案：
1、目标：设备尺寸发生变化、元素等比例适配设备
2、做法：媒体查询，根据设备尺寸设置html（font-size）rem 基准单位。然后页面的元素以rem 为单位就可以等比例缩放
1、rem实际开发适配方案
1）按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）
2）CSS中，设计稿元素的宽、高 相对位置等取值，按照同等比例换算为rem 为单位的值
2、rem适配方案技术使用
3、rem实际开发适配方案1（ rem + 媒体查询 + less技术）
1）设计稿常见尺寸宽度 （640px / 720px / 750px等）
一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果现在基本以750为准
2）动态设置html标签font-size大小
3）元素大小取值方法
第一步：屏幕宽度(px) / 横向划分的份数 = html font-size 的大小（px)
第二步：页面元素(px) / html font-size的大小（px） = 页面元素的rem值
总计： 页面元素的rem值。 = 页面元素（px）/ ( 屏幕宽度（px）/ 横向划分份数 )
