资源介绍
流体平方
它是什么?
使用 HTML 和 CSS 的方形单元的流体网格。
流体正方形可在流体布局中保留单元的正方形比例。 使用 CSS 媒体查询,列数也会减少以适应浏览器或设备宽度。
它适用于所有现代桌面浏览器。 媒体查询被写入移动优先。 IE8 不支持媒体查询,所以临时包含了 css3-mediaqueries.js polyfill。
有关更多信息,请 。
流体方块解决了什么问题?
如果不进行修复,减小浏览器窗口宽度的结果会将流体网格的正方形压缩为矩形。
为了解决这个问题,每个单元的填充底部大小设置为与其宽度相匹配的百分比。 最重要的是,每个单位是全局容器的百分比,以确定有多少列。
将一个单位的宽度设置为 25% 并将 padding-bottom 设置为 25% 将使您连续四个单位保持正方形,无论屏幕大小或浏览器窗口大小如何调整。
这些成分
HTML
每个单元的基本结