问题描述

rem作为移动端的自适应布局已经非常普遍了，但当我把他直接放在PC端显示时，就出现了底部有个滚动条的现象，虽然滚动不是很多，但是作为一个像素级开发人员来说，在心里还是非常过意不去的。 下面以一个简单的移动端TodoList为例。如图，底部有个滚动条。

问题查找

于是开始了一系列的问题查找，也百度一些文章。部分人说是由于padding 或 margin以及border的问题。然而我仔细查看了我的代码，确保自己的宽高都在自己的控制内，所以那些也就都不是我出问题的原因了。

然后继续查找着我的问题所在，这次我打开我的控制台看看我页面的宽度情况，果然被我发现其中的端倪。如图：

我突然就觉得这个宽度非常的熟悉，这不是我电脑屏幕的宽度么？也就是说我3.75rem(按照iPhone的尺寸来规定rem单位）沾满了全屏，同时包括了侧边的滚动条的宽度。

这时候我终于明白原来下面多出来的滚动条是由于侧边滚动条宽度导致的啊。

问题解决

下面先手写一下rem布局用到的代码：

function reSize() {
	var width = window.innerWidth;  //这个宽度包括了浏览器滚动条的宽度，所以使用在PC端要注意把滚动条的宽度给去除
	var html = document.querySelector("html");
	//单位rem
	html.style.fontSize = width / 3.75 + "px";

}
reSize();
window.onresize = function() {
	reSize();
}

由上面的代码可知，我使用的宽度是window.innerWidth。而这个宽度则是屏幕的总宽度，所以当使用3.75rem来表示让元素的宽度占满屏幕的宽度时，则当内容过多产生滚动条时，就会出现底部有滚动条的情况，而这个滚动的宽度也就是侧边滚动条的宽度。

那既然知道原因了，要修改起来也就很简单了，只要把最大的宽度改为去掉滚动条的不就行了吗？所以这里我采用了body的宽度来作为占满屏幕的宽度。

代码在写一遍：

function reSize() {
	var body = document.querySelector("body");
	var width = body.clientWidth;
	var html = document.querySelector("html");
	//单位rem
	html.style.fontSize = width / 3.75 + "px";

}
reSize();
window.onresize = function() {
	reSize();

果然，底部滚动条就没有啦

总结

到这里可能有的小伙伴包括我在内会想，为什么之前就没有出现这个问题呢？我来告诉你吧，那是因为之前我们是把rem布局应用在了移动端布局，而移动端侧边的滚动条并不占据宽度。就拿我们的手机举例来说，它的滚动条就是不占屏幕宽度的，甚至有的时候我们都看不到滚动条对不对？所以有的时候为了方便直接使用100vw在移动端来写rem布局也是没有问题的，而Pc端则由于有侧边滚动条，所以导致底部会有滚动条出现。