html - 如何制作响应式马赛克 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 all and (max-width: 658px) { // mobile devices
    #mosaic { 
        display:block; // to have each musaic in one line
    }
}