Question

而不是使用＆＃34;网格系统＆＃34; （通常在Bootstrap或Foundation等前端框架中看到）定义页面布局是否可以（或者更好地）将这些布局样式直接应用于内容？

例如：

<style>
  .row {
    overflow: auto;
  }
  .col-6 {
    width: 50%;
    float: left;
  }
</style>
<div class="row">
  <div class="col-6">
    <div class="product">
      <h2>Product Name</h2>
      <p>Product description...</p>
    </div>
  </div>
  <div class="col-6">
    <div class="product">
      <h2>Product Name</h2>
      <p>Product description...</p>
    </div>
  </div>
</div>

VS

<style>
  .products {
    overflow: auto;
  }
  .product {
    width: 50%;
    float: left;
  }
</style>
<div class="products">
  <div class="product">
    <h2>Product Name</h2>
    <p>Product description...</p>
  </div>
  <div class="product">
    <h2>Product Name</h2>
    <p>Product description...</p>
  </div>
</div>

对我来说，第二个例子是更好的选择，因为它更灵活。例如，如果我想通过大屏幕尺寸的媒体查询从2列布局转换为4列布局，我可以将.product的宽度更改为25％。对于Bootstrap样式网格系统，宽度设置为HTML级别，我无法更改.col-6宽度，因为它将在整个页面的多个位置使用。

根据我的理解，这就是为什么Foundation使用.large-#-columns，.medium-#-columns，.small-#-columns，以便您可以通过以中等屏幕尺寸定位媒体来定义媒体查询的列大小/布局和小屏幕尺寸（虽然这只是我猜测可能是完全错误的！）。

使用网格系统直接定义布局列与内容？

0 个答案: