html - 如何使自适应马赛克CSS全屏宽度

您好，在制作此自适应马赛克时遇到了麻烦，我要在此处完成的工作是保持7张图像的顺序相同，如果屏幕较小，则使马赛克全宽，但在移动屏幕中按各自的比例放置，但保持订购。

这是我的CSS：

#mosaic {
              width: 100%;
              background-color: aqua;
            }
            .largeImg, .smallImg {
              /*display: inline-block;*/
              float: left;
            }
            .largeImg {
              /*width: 40%;*/
              background-color: #165384;
            }
            .smallImg {
              /*width: 60%;*/
              background-color: #EF0808;
            }

            .col-wrap {
              display: inline-block;
            }

这是我的演示：jsfiddle demo

希望有人可以帮助并感谢您的阅读。

最佳答案

您可以使用media queries实现所需的功能，以下代码特定于移动设备，请尝试；

@media all and (max-width: 658px) { // mobile devices
    #mosaic {
        display:block; // to have each musaic in one line
    }
}

关于html - 如何使自适应马赛克CSS全屏宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32041947/