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; 

}