HTML/CSS 移动布局不响应

Question

我正在开发 Frontend Mentor 的 Single Price Grid 组件，但无法让我的移动设计具有响应能力。当我缩小浏览器时，它的顶部就会脱离页面顶部。

这是一个链接： https: //single-price-grid-component.jordanchude.now.sh/

这是我的存储库：https://github.com/jordanchude/single-price-grid-component/blob/master/index-style.css

这是我的媒体查询中的一段代码。

@media (max-width: 1000px) {

.container {

    display: flex;

    flex-direction: column;

}

#bottom-row {

    flex-direction: column;

    box-sizing: content-box;

    width: 200%;

}

#top-box {

    display: flex;

    flex-direction: column;

}

#bottom-right-box {

    border-radius: 0px 0px 15px 15px;

}

#bottom-left-box {

    border-radius: 0px;

}

#top-box, #bottom-right-box, #bottom-left-box {

    box-sizing: border-box;

    padding: 20px;

}

这也是我正在谈论的内容的照片。我可以向下滚动但不能向上滚动。

Answer 1

问题出在您的翻译中，无论页面限制如何，都会向上移动元素。transform: translate(-50%, -50%);您可以在媒体查询上将转换调整为无小分辨率，或者在使用桌面尺寸时找到另一种方法使 div 居中。尝试这个@media (max-width: 1000px) {.container {    display: flex;    flex-direction: column;    transform: translate(50%, 0%);      top: 0;      left: 0; }