初始rem

在学习移动端时，涉及适应性布局（弹性布局），利用flexible.js文件，让界面可以随浏览器大小进行改变，但对基础概念不懂，写下笔记。解决pc端和移动端布局问题。

rem是什么

1.定义：rem（font size of the root element）是指相对于html根元素的字体大小的单位，它就是一个相对单位

rem与px、em的区别：

em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
px是绝对长度单位，无论什么情况，1px的长度都是固定的，无法实现自适应布局

如何实现弹性布局？

实现方法：1.rem+媒体查询+less进行实现；2.rem+flexible.js
原因：由于媒体查询可以根据不同屏幕尺寸可以设置不同的样式，因此在不同的尺寸下可以对根元素设置不同的字体大小，但尺寸过于太多，将可以利用less语言进行书写，可以创建变量，使代码变得更加简洁

（1） 媒体查询

1. 基本语法：

@media mediatype and|not|only (media feature){//当中放入css样式}

2. 作用
   1.使用@media查询，可以针对不同的媒体类型定义不同的样式；
   2.@media可以针对不同的屏幕尺寸设置不同的样式；
   3.当重置浏览器大小过程中，页面也会根据浏览器的宽度和高度重新渲染页面；
   4.目前针对很多设备均可以用到多媒体查询

3.详细解析

1. mediatype查询类型： ①All 用于所有设备 ②Print 用于打印机和打印浏览 ③Screen 用于电脑屏幕，平板电脑，智能手机

2. 关键字：将媒体类型或者多个媒体特性连接到一起作为媒体查询的条件 (1)And：可以将多个媒体特性连接到一起 (2)Not：排除某个媒体类型 (3)only：指定某个特定的媒体类型

3. 媒体特性：每种媒体类型具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格 (1)Width：定义输出设备中页面可见区域的宽度 (2)min-width：定义输出设备中页面最小可见区域的宽度（3）Max-width：定义输出设备中页面最大可见区域的宽度

（2） less

1. 简介：leaner style sheets是css的扩展语言，也称为css预处理器，其作为css的一种形式的扩展，为css加入了程序式语言的特性，在它的基础之上，加入了变量，Mixin，运算以及函数等功能
2. 使用用时注意：在easy less中，若是一个less文件需要引进另一个less文件，应用@import url（）；并且在除法运算，需要将式子用括号括起来，不括起来可能会解析成是两个值