如何制作响应式马赛克 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
    }
}