Question

我一直试图在他们的网站上做ex.fm做同样的事情。您可以查看ex.fm中的trending部分。瓷砖在网站的右侧部分整齐划分。

当您调整窗口大小时，包含图像的div的大小自动调整大小。自应用样式以来，它不使用媒体查询直接到元素。然后查看开发人员工具中的Elements选项卡尝试调整主窗口的大小。

你知道他们如何计算要应用的尺寸吗？

继承选择器以帮助您在屏幕截图中找到元素

#right > #song_list > #trending_song_list > .trending_song

enter image description here

Answer 1

我得到了一些工作：

<head>  
<style>
body {  
        overflow-y: hidden; 
}       
.song { 
        display: inline-block;
        padding: 0;
        margin: 0;
        outline: 1px solid black;
        float: left;
}       
#container {
        width: 100%;
}       
</style>
<script>
updateWidths = function() {
        var container = document.getElementById("container");
        var elements = document.getElementsByClassName("song");
        var rect = container.getBoundingClientRect();
        var container_width = rect.width;
        var elements_that_fit = Math.floor(container_width / 128);
        var new_size_px = container_width / elements_that_fit;
        for (var i = 0; i < elements.length; i++) {
                elements[i].style.width = new_size_px + "px";
                elements[i].style.height = new_size_px + "px";
        }
}
window.addEventListener("resize", updateWidths);
window.addEventListener("load", updateWidths);
</script>
</head>
<body>  
<div id="container">
<script>
for (var i = 0; i < 512; i++) document.write('<div class="song">Hi</div>');
</script>
</div>  
</body>

没有媒体查询的图像响应宽度

1 个答案: