**html
需求: 随着移动端设备的变化,内容也跟着变化。
**
先来讲说rem单位,以rem为单位,其大小是根据根元素(html标签)的字体大小来判断的,
如 html的font-size:100px; 子元素div 的width:2em; 等同于width:200px;(100 * 2),
这就来思路了: 先以一个固定适配的html的font-size来把页面完成,后再根据适配的宽度来动态的设置其html的font-size,以达到咱们的需求,可能有点绕,咱们来看看代码会更容易理解些。iphone
我以375px(iphone678)设备来进行开发页面,我设html的font-size:100px(也就是说1em = 100px),字体
想设置100%的宽和90px的高 用rem来设置,使该footer随着适配的变化也跟着变化(有人就会说了,直接把宽设置成100%不是更好吗,是的 会更好,但我这里只是拿来作例子来说解rem而已。)htm
开看效果:blog
这个你们都懂是不,接下来正题来了ip
想换成别的设备,这footer宽高跟着设备进行变化,怎么作呢? 对 就是 咱们上所说的思路:根据适配的宽度来动态的设置其html的font-size,请看下面js代码:开发
这样就能够随设备的变化而变化了。rem
看看效果:
iphone5:im
iPad:d3
都适配了。