响应式 Web 设计 – 网格视图

响应式 Web 设计 – 网格视图 什么是网格视图? 很多网页都是基于网格设计的,这说明网页是按列来布局的。 使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。 响应式网格视图通常是 12 列,宽度为100%,在浏览器窗口大小调整时会自动伸缩。 以上实例包含两列。 12 列的网格系统可以更好的控制响应式网页。 首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。 在每列中指定 class, class=”col-“ 用于定义每列有几个 span : CSS: .col-1 {width: 8.33%;} .col-2 {width: 16.66%;}