javascript - 响应式边框

Question

我创建了一个 JavaScript 函数，它捕获元素的宽度并将该测量值的百分比分配给元素的边框宽度样式。一切正常，除了当我将窗口扩大到某个点以上时，最后一个元素会下降到下一行，就好像上面没有足够的空间一样。我正在使用 box-sizing: border-box 和 vw's 进行测量，所有加起来都是 100vw，所以我无法弄清楚为什么最后一个元素会下降到下一行。我在 CodePen 之外测试了这段代码，所有元素都在一行中，所以这可能只是 CodePen 的问题。我只是好奇我是否遗漏了什么。

代码链接如下: http://codepen.io/CASEYJAYMARTIN/pen/GrEaI

Answer 1

我在本地设置了您的示例，并且遇到了您描述的最后一个框掉落到下一行的问题。我认为我的滚动条是罪魁祸首。

html {
  overflow-y: hidden;
}

我把它藏起来了，现在所有的盒子都在一条线上。

此外，您可能希望降低 borderWidth。

borderWidth = Math.floor(squareWidth * 0.1);

此外，不要忘记支持 Firefox。

.box, .square {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}