首先，我對我糟糕的標題感到抱歉，如果您想到更好的標題，請重命名這個問題。我想在移動設(shè)備上顯示調(diào)整頁面布局。當(dāng)前的桌面版本是：我想做一些類似的事情：文本是粘性的，并在滾動每個步驟時通過 JS 進行自我調(diào)整。因此，我有一個.text-container具有與繪圖的整個高度相匹配的特定高度的元素。我的.text元素就是 的元素sticky。所以我的 HTML 看起來像：<article> <div class="figure"> <div class="step" id="step-1"></div> <div class="step" id="step-2"></div> <div class="step" id="step-2-5"></div> <div class="step" id="step-3"></div> <div class="step" id="step-4"></div> </div> <div class="text-container"> <div class="text"> <h1> Step <span>1</span> </h1> <div class="bold">Alice’s phone broadcasts a random message every few minutes</div> <p> In order to maintain user privacy, the message is sent over Bluetooth and does not use location for proximity detection. <br> This message is called a Proximity Identifier or EphID. Theses identifiers are unique and change often. </p> </div> </div></article>這是我用來調(diào)整布局的 CSS（此處的代碼位于 SCSS 中）：@media (max-width: 960px) { article { .text-container { .text { top: 50vh; left: 0; width: 100vw; height: 50vh; background: grey; } } }}不幸的是，我得到了這個：元素的寬度和位置似乎有問題.text。根據(jù)評論中的要求，這里是一個CodePen，沒有圖像，但它的工作原理相同）
1 回答
慕沐林林
TA貢獻2016條經(jīng)驗 獲得超9個贊
我有一個max-width房產(chǎn)，它的布局很混亂。
我發(fā)布我更改的代碼，以防萬一有人遇到與我相同的問題：
@media (max-width: 960px) {
? ? article {
? ? ? ? .text-container {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 100vh;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? .text {
? ? ? ? ? ? ? ? position: -webkit-sticky;
? ? ? ? ? ? ? ? position: sticky;
? ? ? ? ? ? ? ? top: 50vh;
? ? ? ? ? ? ? ? left: 0;
? ? ? ? ? ? ? ? width: 100vw;
? ? ? ? ? ? ? ? max-width: 100vw;
? ? ? ? ? ? ? ? height: 50vh;
? ? ? ? ? ? ? ? background: grey;
? ? ? ? ? ? }
? ? ? ? }
? ? }
}
- 1 回答
- 0 關(guān)注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消