Question

我正在学习使用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行以上的行＆gt;列）。

Answer 1

第二种方法肯定更好，因为：

灵活性：size-number类不仅仅是关于浮动布局，它主要是响应度。您可以稍后添加一些中型或大型类，并为不同的屏幕制作不同的布局（这不仅涉及列宽度，还涉及调整窗口大小时更改位置的能力）。即使你现在不认为你需要它，谁知道未来
统一性：size-number类（和第一列）不仅仅是关于大小调整和定位。它们也用于统一的外观和感觉，因为它们由复杂的样式表定义。如果您需要重新定义样式，您可以在同一时间重新定义整个应用程序的样式，这样您就不会忽略任何样式。这是关于空格，边距，填充等等。
清晰度：在文件中单独编写CSS比在代码中直接编写样式要好得多。可以重复使用类，并且CSS文件是您查找样式定义的第一个位置（无论您是团队中的新开发人员还是长时间阅读自己的代码）。
兼容性：基金会开发人员了解他们的代码，并且新版本的基础版与新版基础版的兼容性要高于您自己的代码。

最佳基金会html嵌套练习

1 个答案: