前端学习之移动开发中的rem适配及flexible.js的使用

移动端的机型及屏幕多种多样，宽高也各不一样，因此我们需要一个相对单位来统一。

rem

rem是相对单位，是相对于根标签HTML标签文字大小计算得来的结果。1rem = 1个html根标签文字大小，根标签指的就是html标签
实际的px像素大小 = rem值*根标签html的文字大小
rem适配原理
我们需要将设计稿给出的px像素值，通过技术手段转化为对应的rem相对值，从而实现在不同的视口下通过我们计算的rem值实现元素的缩放；不同视口下HTML根标签的文字大小是不同的，rem值 = 实际的px像素 ÷ 根标签html的文字大小。
媒体查询
实际开发可能会存在不同尺寸的屏幕大小，我们就需要用媒体查询来判断不同屏幕大小，然后设置各自不同的css样式；
基本语法
@media mediatype and|not|only (media feature) {
css样式
}
mediatype（媒体类型）all（所有设备）print（打印设备） screen（用于电脑、平板、手机屏幕）
and|not|only（关键字）逻辑类型
and 将多个媒体特性链接到一起，相当于且 ，not排除某一个 ， only 特定的某一个
media feature（媒体特性）
必须有小括号包裹，小括号里面书写css样式
一般情况下我们只需要判断width ，定义输出设备中页面可见区域的宽度（屏幕宽度）
max-width最大宽度，不能再大于这个宽度了，小于这个值
min-width最小宽度，不能再小于这个宽度了，大于这个值
媒体查询的link引入方法
语法：

less

less是一门css预处理语言，扩展了css的动态特性；
less扩充了css语言，使css具备一定的逻辑性、计算能力。
注意：浏览器是不识别less代码的，我们最终引入页面的还是css文件，需要借助“Easy Less”插件翻译转化为css文件
没有固定的值，可以改变的，我们可以把我们一些常用的样式比如颜色和数值等定义成变量重复使用；
变量的命名规范
必须有@为前缀，不能包含特殊字符，不能以数字开头，大小写是单独的大写和小写的含义是不同的；
实际开发中我们需要将less文件和css文件分开保存，所以我们需要设置less翻译成css的存储位置
除法/运算一定要添加小括号才能生效，(100px / 3) 或者 ./ 但是语法会报错不推荐使用
将一些公用的样式，直接导入到对应的样式文件中，不需要用link引入；@import “./common.less”;

flexible.js的使用

实际开发我们不需要自己去利用媒体查询语法去挨个计算适配，直接用flexible.js适配即可
flexible.js的工作原理
flexible.js时间设备的视口平均划分为10份，然后再去按照不同的视口大小计算出各自的html根标签的文字大小；

flexible.js的使用方法：
第一步：将flexible.js拷贝到自己的项目中
第二步：将flexible.js利用script标签引入到自己html页面的最后面
github地址：https://github.com/amfe/lib-flexible
今天给大家介绍了rem适配和flexible.js在移动端的使用，明天给大家介绍vw和vh在移动端的使用。