webAPP-rem布局

rem布局

主要实现效果：可以实现随着屏幕的变化，盒子的宽度和高度文字一起等比例缩放。

区别：之前的流式布局和flex布局高度都是写死的，rem布局中的盒子大小和文字等数据都是rem单位，可以实现实变化。

1.rem+less+媒体查询布局

.Less文件可以在写css时进行运算，并且 可以嵌套写CSS样式
可以定义变量@变量名：变量值。 后方css样式可以直接引用此值

媒体查询：可以设置在不同尺寸屏幕中页面的不同的样式。比如说可以设置屏幕尺寸为640PX以下，盒子宽度为400px，字大小为12px，盒子宽度为600px，字大小为16px 提倡从小到大写

rem ：是字体单位，它的值和html的fint-size有关，可以通过媒体查询改变 html@ont-size大小来控制rem的大小。

font-size:屏幕的宽度一般是（750）/ 划分的总数（15份）=font-size,font-size也就是（750）屏幕划分成15份，一份占得大小。

rem:可以理解为占了屏幕几份。设计图的盒子在页面具体的rem值为：设计图上的数量 / font-size。也就是看看自己在屏幕中真实占了几份。比如说一个盒子设计图中为50px，font-size为50PX，那么他刚好就占了1rem，也就是一份。

所以说可以通过媒体查询设置不同屏幕下，不同的宽度对应着不同的font-size,从而控制页面布局随着屏幕窗口的缩放而实时变化。

2.flexible.js+cssrem插件布局

引入flexible.js文件。

flexible.js中设置了实时获取屏幕大小，内置了随着屏幕大小变化，font-size大小也会实时放大缩小，可以做到非常丝滑的控制屏幕尺寸和页面样式大小联动效果。

flexible.js默认给我们划分了10个等份。

默认的flexible.js文件权重高，浏览器默认字体不生效，导致盒子宽度一直是100% 所以需要声明一个默认字体样式，使得屏幕大于750时，可以一直保持750的状态，不会沾满全屏。

如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来走 不会让我们页面超过750px

cssrem插件：安装后，在设置中可以设置默认html@font-size的大小，在敲代码PX值时，可以自动显示出PX值转化为rem值的大小。