如何制作响应式马赛克css全屏宽度

Question

你好我有麻烦制作这种响应式马赛克，我在这里想要实现的是保持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

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

Answer 1

您可以使用media queries实现所需的功能，以下代码专门针对移动设备，请尝试使用;

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