我正在開發 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;}這也是我正在談論的內容的照片。我可以向下滾動但不能向上滾動。
1 回答

蠱毒傳說
TA貢獻1895條經驗 獲得超3個贊
問題出在您的翻譯中,無論頁面限制如何,都會向上移動元素。
transform: translate(-50%, -50%);
您可以在媒體查詢上將轉換調整為無小分辨率,或者在使用桌面尺寸時找到另一種方法使 div 居中。
嘗試這個
@media (max-width: 1000px) {
.container {
display: flex;
flex-direction: column;
transform: translate(50%, 0%);
top: 0;
left: 0;
}
- 1 回答
- 0 關注
- 109 瀏覽
添加回答
舉報
0/150
提交
取消