【问题标题】:CSS transform: scale makes bottom fixed elements disappearCSS 变换:缩放使底部固定元素消失
【发布时间】:2021-01-10 22:15:04
【问题描述】:

我正在尝试缩放我的 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 时,邀请元素消失。

【问题讨论】:

    标签: html css css-position transform scale


    【解决方案1】:

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

    【讨论】:

    【解决方案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;一般的理念是随着视口变小,将元素重新排列到单个垂直堆栈中。

    【讨论】:

    • 你能解释一下如何解决它吗?
    • 我不知道你现在的设计是什么样子的。不同的设计需要不同的方法。关于响应式设计的链接应该为您指明一个大方向。或者你有什么理由缩小整个身体?而不是重新安排。感觉在较小的屏幕尺寸上,文字会变得不可读。
    • 在问题中上传了一些简单的 css 代码,也许这会有所帮助?添加元标记是否适用于笔记本电脑/台式机屏幕或仅适用于平板电脑和手机等移动设备?将底部值从像素更改为 vw 和 vh 也会起作用吗?
    • 从 px 更改为 vh/vw 将不起作用。一旦对父元素应用了变换,就会计算一个新的边界框。所以任何固定的孩子都会坚持这个新的边界框。添加元标记将有助于区分不同的设备。我敦促您查看this example 中的媒体查询。当屏幕宽度低于 620 像素时,页面会使用不同的规则集重新排列。
    • 只是为了清楚元标记 仅适用于移动设备对吗?它不会影响不同的笔记本电脑和台式机屏幕尺寸吗?
    猜你喜欢
    • 2015-01-19
    • 2017-05-25
    • 1970-01-01
    • 2013-11-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多