粘性元素和媒体查询的布局问题

Question

首先，我对我糟糕的标题感到抱歉，如果您想到更好的标题，请重命名这个问题。

我想在移动设备上显示调整页面布局。当前的桌面版本是：

我想做一些类似的事情：

文本是粘性的，并在滚动每个步骤时通过 JS 进行自我调整。因此，我有一个.text-container具有与绘图的整个高度相匹配的特定高度的元素。我的.text元素就是 的元素sticky。

所以我的 HTML 看起来像：

<article>

    <div class="figure">

        <div class="step" id="step-1"></div>

        <div class="step" id="step-2"></div>

        <div class="step" id="step-2-5"></div>

        <div class="step" id="step-3"></div>

        <div class="step" id="step-4"></div>

    </div>

    <div class="text-container">

        <div class="text">

            <h1>

                Step <span>1</span>

            </h1>

            <div class="bold">Alice’s phone broadcasts a random message every few minutes</div>

            <p>

                In order to maintain user privacy, the message is sent over Bluetooth and does not use location for proximity detection.

                <br>

                This message is called a Proximity Identifier or EphID. Theses identifiers are unique and change often.

            </p>

        </div>

    </div>

</article>

这是我用来调整布局的 CSS（此处的代码位于 SCSS 中）：

@media (max-width: 960px) {

    article {

        .text-container {

            .text {

                top: 50vh;

                left: 0;

                width: 100vw;

                height: 50vh;

                background: grey;

            }

        }

    }

}

不幸的是，我得到了这个：

元素的宽度和位置似乎有问题.text。

根据评论中的要求，这里是一个CodePen，没有图像，但它的工作原理相同）

Answer 1

我有一个max-width房产，它的布局很混乱。我发布我更改的代码，以防万一有人遇到与我相同的问题：@media (max-width: 960px) {    article {        .text-container {            position: absolute;            top: 100vh;            left: 0;            .text {                position: -webkit-sticky;                position: sticky;                top: 50vh;                left: 0;                width: 100vw;                max-width: 100vw;                height: 50vh;                background: grey;            }        }    }}