移动布局基础之 rem适配布局

1. rem基础
   rem单位是是一个相对单位，相对于HTML元素的字体大小,和em不同
   通过修改HTML里面的文字大小来改变页面中元素的大小可以整体控制
   2.1 媒体查询(media query)
   使用@media查询，可以针对不同的媒体类型定义不同样式
   可以针对不同屏幕尺寸设置不同样式
   在重置浏览器大小的过程中，会根据浏览器宽高重新渲染页面
   2.2 语法规范
   @media media type and|not|only (media feature) {
   CSS-Code
   }
   mediatype查询类型
   all: 用于所有设备
   print: 用于打印机和打印预览
   scree: 用于电脑和手机屏幕
   2.3 媒体特性
   width: 定义输出设备中页面可见区域的宽度
   min-width: 定义输出设备中页面最小可见区域的宽度
   max-width: 定义输出设备中页面最大可见区域的宽度
   注意：媒体特性要由小括号包含
   2.4 引入资源
   当样式比较多的时候，我们可以针对不同媒体使用不同样式表，
   其原理就是直接在link中判断设备的尺寸，然后引用不同的css文件
   3.1 less基础
   CSS是一门非程序式语言，没有变量，函数，作用域等概念
   CSS需要书写大量代码，冗余度较高
   不方便维护及扩展，不利于复用
   CSS没有很好的计算能力
   3.2 less介绍
   less是一门CSS扩展语言，也称为CSS预处理器(less,sass,stylus)
   在CSS的基础上，为CSS加入程序式语言的特征
   引入了变量，Mixin，运算及函数等功能
   3.3 less安装
   安装node.js 使用cmd命令输入"node -v"检验
   使用cmd命令"npm install -g less"安装less
   输入"less -v"检验
   3.4 less使用
   less变量：
   @变量名：值；
   变量名必须以@开头 不能包含特殊字符 不能以数字开头 大小写敏感
   less编译
   vocode less插件 保存后自动生成CSS文件
   less嵌套
   子元素的样式直接写到父元素
   如果遇到（交集/伪类/伪元素选择器）
   内层选择器前面没有&号，则它被解析为父选择器的后代
   如果有&号，就被解析为父元素自身或父元素的伪类
   less运算
   任何数字，颜色或者变量都可以参与运算，less提供了加减乘除算数运算
   运算符左右两边必须要有空格隔开
   对于两个不同单位之间的运算，取第一个值的单位
   4. rem适配方案
   按照设计稿与设备宽度的比例，动态计算并设置HTML标签font-size的大小（媒体查询）
   CSS中，设计稿元素的宽高，相对位置等取值，按照同等比例换算为rem的值