javascript - 如何实现像斗鱼直播列表页那样的自适应布局?
伊谢尔伦
伊谢尔伦 2017-04-11 11:15:10
0
0
243

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

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

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

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

reply all (0)
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!