HTML/CSS 移动布局不响应答案

【问题标题】：HTML/CSS Mobile Layout Isn't ResponsiveHTML/CSS 移动布局不响应
【发布时间】：2020-07-13 16:32:05
【问题描述】：

我正在开发 Frontend Mentor 的单一价格网格组件，但我的移动设计无法响应。当我缩小浏览器时，它的顶部会超出页面顶部。

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

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

这是我的媒体查询中的一个 sn-p 代码。

@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;
}

这也是我所说的照片。我可以向下滚动，但不能向上滚动。

【问题讨论】：

标签： html css flexbox grid frontend

【解决方案1】：

问题出在您的翻译中，无论页面限制如何，您的元素都会向上移动。

transform: translate(-50%, -50%);

您可以在媒体查询中将转换调整为无以实现小分辨率，或者在使用桌面尺寸时找到另一种方式使您的 div 居中。

试试这个

@media (max-width: 1000px) {
.container {
    display: flex;
    flex-direction: column;
    transform: translate(50%, 0%);  
    top: 0;  
    left: 0; 
}

【讨论】：