我正在学习使用 Foundation 编写响应式页面，我想知道使用 Foundation 作为模板(对于某些顶级 div)还是一直使用基础行/列大小数字类更好？
我的意思是我应该这样写我的 HTML:
<body>
<div class="row">
<div class="small-8 column">
<div style="display: inline; width: 33%;"></div>
<div style="display: inline; width: 33%;"></div>
<div style="display: inline; width: 33%;"></div>
</div>
<div class="small-4 column">
<div style="display: inline; width: 33%;"></div>
<div style="display: inline; width: 33%;"></div>
<div style="display: inline; width: 33%;"></div>
</div>
</div>
</body>
或者像这样:
<body>
<div class="row">
<div class="small-8 column">
<div class="row">
<div class="small-4 column></div>
<div class="small-4 column></div>
<div class="small-4 column></div>
</div>
</div>
<div class="small-4 column">
<div class="row">
<div class="small-4 column></div>
<div class="small-4 column></div>
<div class="small-4 column></div>
</div>
</div>
</div>
</body>
这个例子很简单，只是为了展示我的要求。我的问题与更深层次的嵌套有关(比如 5 层以上的行>列)。
最佳答案
第二种方法肯定更好，因为:
- 灵 active :size-number 类不仅与 float 布局有关，而且与响应速度有关。您可以稍后添加一些中型或大型类，并为不同的屏幕制作不同的布局(这不仅与列宽有关，还与调整窗口大小时更改位置的能力有关)。即使你认为你现在不需要它，谁知道 future 呢
- 统一性:尺寸数字类别(以及第一列)不仅仅与尺寸和位置有关。它们还用于统一的外观和感觉，因为它们是由复杂的样式表定义的。如果您需要重新定义样式，请同时为整个应用程序重新定义样式，这样您就不会忽略任何一个。这是关于空格、边距、填充等等。
- 清晰度:在文件中单独编写 CSS 比直接在代码中设置样式要好得多。类可以被重用，CSS 文件是您寻找样式定义的第一个地方(无论您是团队中的新开发人员还是经过很长时间阅读自己的代码)。
- 兼容性:Foundation 开发人员了解他们的代码，并且与您自己的代码相比，Foundation 的新版本与旧 Foundation 版本的兼容性更好的可能性要大得多。
关于html - 最佳基础html嵌套实践，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28341959/