一、rem的不足

哎哟，小朋友们，你们知道什么是rem吗？它就像是我们H5里面的一个超级英雄， 大体上... 能帮我们的页面变得又高又瘦。但是这个英雄也有他的小缺点哦！

1. 单位转换计算比较麻烦。

2. 单纯的rem没有解决高度适配的问题。

3. 它还有一个超级无敌大问题，就是没有解决高度适配的问题！哎呀，就是有时候我们的页面内容太长，需要滚动条才能看到全部内容，别怕...。

二、 好的适配方案

好的适配方案就像是给H5穿上一件合身的衣服，让它无论在什么设备上都能展示得漂漂亮亮的。那怎么才能找到这件衣服呢？我来教你们几个小技巧：，摸个底。

1. 我们先来算一下窗口的宽度和高度， 看看它们跟设计稿的宽度和高度比起来哪个更接近。 要我说... 这样我们就能找到一个合适的缩放比例。

2. 我们还要看看设计稿的宽度和高度，主要原因是那可是我们的基准哦！

我个人认为... 3. 然后 我们就用这个小技巧：载入页面的时候，用JS去测量一下窗口的宽高，跟设计稿的宽高比一比，看看是宽了还是高了然后选一个比较小的比例，缩小一下我们的页面内容。

三、 具体操作

先说说我们要用px写CSS，然后通过一个神奇的 被割韭菜了。 工具“px-rem转换器”来把它变成rem单位。

然后 我们要用innerWidth来算滚动条的宽度，clientWidth来算用户内容能放的空间，baseFontSize是750设计稿下html的基准fontsize，newSize是宽高适配后的html的基准font-size。

还有， 你们看这个gif图，它告诉我们一个很重要的东西：当高度的变化值小于宽度的变化值时改变高度，页面中元素的大小也是自应用变化的。

好了小朋友们，今天我们就学到这么多啦！打造完美H5适配方案，就是要找到那个合适的衣服，让我们的页面在所有设备上都展示得美美的。你们学会了吗？别忘了多实践哦！