CSS 变换：缩放使底部固定元素消失

Question

我正在尝试缩放我的 body 标签中的元素，以便我的网站在不同的屏幕尺寸上看起来相同。但是，当我应用 transform: scale() 时，与底部关联的固定元素会消失。为什么会这样，我该如何解决？

css

body
{
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1, 1);
}

#invite
{
    position: fixed;
    bottom: 20px;
    right: 31px;
    text-align: center;
    cursor: pointer;
}

当我缩放 1 时，邀请元素消失。

Answer 1

如果您可以包含您的代码，这将更有帮助，我认为您应该使用media query，如果您想使您的页面具有响应性。

Answer 2

transform:scale(0.5) 将为position:fixed; 元素创建一个新的绑定框，（当该元素是转换项的子元素时）

relevant Stackoverflow question 并在铬错误跟踪器中进一步explanations

“错误”行为示例：

div {
  margin: 20px;
  padding: 20px;
}

.body {
  background: olive;
  min-height:600px
}

.main {
  background: pink;
}

.bottom {
  background: orange;
  position: fixed;
  bottom: 0;
}

.body:hover {
  transform: scale(1)
}

<div class='body'>
  <div class="main">
    main content</div>
  <div class="bottom"> bottom content </div>;
</div>

至于替代品：responsive design;一般的理念是随着视口变小，将元素重新排列到单个垂直堆栈中。