移动布局第五天 rem布局

1.rem解决的问题

​ 页面布局文字随着屏幕大小变化而变化 高度可以变化 屏幕变化的时候元素宽度和高度等比例缩放

​ 解决文字大小和元素高度的自适应

2.rem单位

​ rem是相对于html元素字体大小来说的，em是相对于自身元素的font-size值来说的

​ 优点：可以通过修改html里的文字大小来改变页面元素中的大小

​ px是固定单位，em和rem是相对单位，em相对的是自身的，rem相对的是html的

3.flexible.js + rem单位

​ head标签中 引入<script src="./XX"></script>

​ flexible.js的作用：将视口的宽度除以10设置给html的font-size

​ 1rem永远等于10%的视口宽度

​ 给定一个2倍图设计稿的时候，先宽度除以2，在除以屏幕的宽度的10%，即得到所要计算的rem值

4.媒体查询 Media Query

​ @media针对不同的屏幕尺寸设置不同的样式 按从小到大的顺序写（推荐）或从大到小

​ 作用：根据不同的设备屏幕来设置不同的css样式

​ 语法：@media mediatype and|not|only （media feature）{

​ CSS代码； and：且 not：非 only：指定的媒体类型

​ media feature：媒体特性 width：宽度 max-width：最大的宽度 min-width：最小的宽度

​ 媒体查询+rem实现元素变化

​ 引入资源 <link rel="stylesheet" href="XXX.css" media="媒体查询语句">

4.rem适配方案原理

​ （1）让一些不能等比例适应的，达到当设备尺寸发生改变时，等比例适配当前设备

​ （2）根据媒体查询加rem实现

​ rem适配方案技术使用：

​ （1）less、媒体查询、rem

​ 公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）

​ 屏幕宽度/划分的份数=html font-size的大小

​ 所以最后的rem值：页面元素值（px）/ html里面的文字的大小

​ （2）flexble.js、rem（更简单）

5.vw/vh

​ vw : 1vw = 1%视口宽度​ vh : 1vh = 1%视口高度 （注意：由于在实现元素宽度、高度、字体大小等自适应时，都是依据视口​ 的宽度，所以一般只会使用vw，很少使用vh）

​ vw/vh相对的是视口的宽度和高度，width和height相对的是父元素的宽度和高度