有没有办法使用 HTML/CSS/JS 根据窗口大小缩放复杂的 <div>？-解网

问：

我目前正在制作一个网站，并创建了一组复杂的 div 元素。它们在我的浏览器的原生尺寸上看起来很棒，但调整浏览器的大小会导致奇怪的包装问题，并使元素错位。

这是我现在的样子......

<body id='table'>
    <div class="input-wrapper">
        <div class="search-wrapper">
            <label for="search"></label>
            <input type="search" id="search" placeholder="Search for a level..." data-search>
            <select id="searchBy">
                <option value="levelName">Name</option>
                <option value="creator">Creator</option>
                <option value="song">Song</option>
            </select>
        </div>
        <div class="page-wrapper">
            <div class="resultNum"></div>
            <div class="pageSelector">
                <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="l-arrow">◀</button>
                <input type="number" class="page" min="1" value="1">
                <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" id="r-arrow">▶</button>
            </div>
        </div>
    </div>
    <div id="data-output"></div>
</body>

我使用 JS 脚本插入元素，它像这样插入它们......

      out += \`
         <div id="wrap"><div class='row'>
            <div class='innerRow' style='background-image: linear-gradient(to right, rgba(33, 37, 41, 0.75), rgba(255, 255, 255, 0.1)), url(images/${level.levelId}.png), url(images/default.png)'>
               <div class='row1'>
                  <div class='row1a'>
                     <div class='levelName'>${level.levelName}</div>
                     <div class='levelId'>${level.levelId}</div>
                  </div>
                  <div class='creator'>${level.creator}</div>
               </div>
               <div class='levelInfo'>
                  <div class='row2'>
                     <div class='row2a'>Difficulty</div>
                     <div class='row2b'>
                        <div class='difficulty'>${level.difficulty + " " + rewardNum}</div>
                        <div class='reward'><img src = 'difficulties/${reward}.png'></div>
                     </div>
                  </div>
                  <div class='row3'>
                     <div class='row3a'>Coins</div>
                     <div class='coins'><img src = 'difficulties/${coin}.png'></div>
                  </div>
                  <div class='row4'>
                     <div class='row4a'>Song</div>
                     <div class='song'><span>${level.song}</span></div>
                  </div>
               </div>
               <div class='face'>
                  <img src = 'difficulties/${difficultyFace}.png'
               </div>\`;

作为参考，这是页面的样子......

理想情况下，我希望这些“卡片”在窗口变小时干净地调整大小。

起初，我试图通过使外部 div 中 div 的所有边距和填充都依赖于来解决这个问题。然而，这被证明是非常乏味的，而且元素彼此之间没有正确对齐，仍然会导致文本换行问题，只是不同的问题。vw

最终，我决定尝试使用 .这显然适用于常数，并且调整了整个元素的大小，而没有任何奇怪的定位问题。但是，我需要能够基于 .这是它的样子......transform: scale()transform: scale()vw


/* This is the CSS for the wrapper. */

.innerRow {
    
    transition: all 0.2s ease-in-out; 

    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 20px;

    margin-left: 18.65vw;
    margin-right: 18.65vw;
    margin-top: 10px;

    background-size: 100%;
    background-position: 40% 50%;

    vertical-align: middle;
    
    border-radius: 5px;

    display: flex;

}

/* This doesn't work. My browser's window is 1879px for context. */
.row {
    transform: scale(calc(100% * calc(100vw / 1879)));
}

我试着这样做无济于事。这不是我可以使用的属性吗？我在其他一些类似的帖子中看到人们发现使用它很成功，但我没有。

JavaScript HTML CSS

有没有办法使用 HTML/CSS/JS 根据窗口大小缩放复杂的 <div>？

Is there a way to scale a complex <div> based on window size using HTML/CSS/JS?

评论

有没有办法使用 HTML/CSS/JS 根据窗口大小缩放复杂的 &lt;div&gt;？

Is there a way to scale a complex <div> based on window size using HTML/CSS/JS?

评论

有没有办法使用 HTML/CSS/JS 根据窗口大小缩放复杂的 <div>？