我正在使用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;
}
这里也是我在说什么的照片。我可以向下滚动但不能向上滚动。
问题出在您的翻译中,无论页面限制如何,都在使元素向上移动。
transform: translate(-50%, -50%);
您可以在媒体查询中将转换调整为无,以获得较小的分辨率,或者使用桌面大小时找到另一种使div居中的方法。
尝试一下
@media (max-width: 1000px) {
.container {
display: flex;
flex-direction: column;
transform: translate(50%, 0%);
top: 0;
left: 0;
}