为什么`vw`和`vh`不能正确缩放？

Question

我正在做一个相框。 <div>的{​​{1}}的{​​{1}}和width的{​​{1}}。调整窗口大小时，为什么90vw缩放不正确？

代码：

height

90vh

Answer 1

您应该为所有内容（box-sizing: border-box;添加*，以包括边框和整体宽度和高度中的padding，并使用margin: 0代替{{1 }}，以padding: 0重设默认边距。

body

* {
  box-sizing: border-box;
}
  body {
    margin: 0px;
  }
  
  #frame {
    border-top: 8px solid orange;
    border-left: 16px solid orange;
    border-bottom: 8px solid orange;
    border-right: 1px solid white;
    border-radius: 8px;
    width: 90vw;
    height: 90vh;
    padding: 16px;
  }