我正在開(kāi)發(fā) Frontend Mentor 的 Single Price Grid 組件，但無(wú)法讓我的移動(dòng)設(shè)計(jì)具有響應(yīng)能力。當(dāng)我縮小瀏覽器時(shí)，它的頂部就會(huì)脫離頁(yè)面頂部。這是一個(gè)鏈接： https: //single-price-grid-component.jordanchude.now.sh/這是我的存儲(chǔ)庫(kù)：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;}這也是我正在談?wù)摰膬?nèi)容的照片。我可以向下滾動(dòng)但不能向上滾動(dòng)。
1 回答
蠱毒傳說(shuō)
TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超3個(gè)贊
問(wèn)題出在您的翻譯中，無(wú)論頁(yè)面限制如何，都會(huì)向上移動(dòng)元素。
transform: translate(-50%, -50%);
您可以在媒體查詢上將轉(zhuǎn)換調(diào)整為無(wú)小分辨率，或者在使用桌面尺寸時(shí)找到另一種方法使 div 居中。
嘗試這個(gè)
@media (max-width: 1000px) {
.container {
display: flex;
flex-direction: column;
transform: translate(50%, 0%);
top: 0;
left: 0;
}
- 1 回答
- 0 關(guān)注
- 104 瀏覽
添加回答
舉報(bào)
0/150
提交
取消