web移动端rem的适配

左手的ㄟ右手 2021-11-23 21:12 414阅读 0赞

\*\*

需求: 随着移动端设备的变化，内容也跟着变化。  
\*\*  
先来说说rem单位，以rem为单位，其大小是根据根元素（html标签）的字体大小来判断的，  
      如 html的font-size：100px； 子元素div 的width：2em； 等同于width：200px；（100 \* 2），  
这就来思路了： 先以一个固定适配的html的font-size来把页面完成，后再根据适配的宽度来动态的设置其html的font-size，以达到我们的需求，可能有点绕，我们来看看代码会更容易理解些。

我以375px（iphone678）设备来进行开发页面，我设html的font-size：100px（也就是说1em = 100px），

想设置100%的宽和90px的高 用rem来设置，使该footer随着适配的变化也跟着变化（有人就会说了，直接把宽设置成100%不是更好吗，是的 会更好，但我这里只是拿来做例子来讲解rem而已。）

![1158442-20190610094058828-1018616921.png][]

![1158442-20190610094106527-456016178.png][]

![1158442-20190610094112109-1078698498.png][]

开看效果：

![1158442-20190610094122889-1876813599.png][]

这个大家都懂是不，接下来正题来了

想换成别的设备，这footer宽高跟着设备进行变化，怎么做呢？ 对 就是 我们上所说的思路：根据适配的宽度来动态的设置其html的font-size，请看下面js代码:

![1158442-20190610094216031-1877403956.png][]

这样就可以随设备的变化而变化了。

看看效果：  
iphone5：

![1158442-20190610094133567-47467401.png][]

iPad:

![1158442-20190610094144177-1406791606.png][]

都适配了。

转载于:https://www.cnblogs.com/1156063074hp/p/10996091.html

[1158442-20190610094058828-1018616921.png]: /images/20211122/cbbd213a6d1447a9bab381cb3b54e367.png
[1158442-20190610094106527-456016178.png]: /images/20211122/b853bd028ddb41f6adc711ff435d45b2.png
[1158442-20190610094112109-1078698498.png]: /images/20211122/60f270c8b53f49738b85f6f6f40b262f.png
[1158442-20190610094122889-1876813599.png]: /images/20211122/f3db5e4948a043a9b624349f3cf97748.png
[1158442-20190610094216031-1877403956.png]: /images/20211122/49b1233a19d74e478c701b711fbd2a18.png
[1158442-20190610094133567-47467401.png]: /images/20211122/aa4084977961461188fdbeaabde65b20.png
[1158442-20190610094144177-1406791606.png]: /images/20211122/a47e8487f72f487dbec13f757a10e51d.png