如何实现像斗鱼直播列表页那样的自适应布局？

Question

比如 http://www.douyu.com/directory/all 这个页面，当你改变浏览器的宽度的时候，页面上的方块会等比例缩放，缩放到一定比例后，列数就会改变。我纠结了好多天都不知道这样的自适应该怎么实现。

虽然用下面这种方式也能自适应，但是当你改变浏览器宽度的时候也只能让方块的宽度跟着改变，方块的高度并不会跟着一起等比缩放， 只能在浏览器的宽度达到@media设置的的另一个范围的时候才会突然一下子改变高度

@media screen and (max-width: 900px) and (min-width:600px) {    .item-wrapper {      width: 25%;      height:200px;
}

我这样描述大家知道我要问的是什么问题了吗。。。。
我看好多个直播网站都是这样的，我看斗鱼的css里面并没有用到媒体查询，谁能告诉我他们究竟是怎么做的？

Answer 1

使用flex弹性盒模型布局页面,字体大小用rem，用js根据窗口大小确定rem根字体大小。