html - 语义 HTML5 CSS3 响应式设计

Question

在阅读了一些关于使用 HTML5 和 CCS3 进行响应式网页设计的书籍后，我开始搜索示例模板来尝试一下。

但是，我遇到的一切似乎都使用了我不熟悉的 CSS 网格。有许多可用的框架似乎都使用网格系统。当我查看源代码时，它似乎违背了我所阅读的所有内容。他们仍在使用 divs 而没有使用任何 HTML5 标签，因此是非语义的。我想构建没有 CSS 网格的响应式网站，以便它是语义化的。谁能帮助我从哪里开始？我很乐意看到一个不使用网格系统的响应式网页示例。

我宁愿从头开始构建也不愿使用框架。

Answer 1

您仍然可以将 HTML5 语义标记放在没有语义的标记内，例如，您的 article 元素可以被无意义的 div 元素包围。

话虽如此，您根本不必从框架开始 - 但我的建议是限制您需要更改大小以使事物具有响应性的元素数量。例如，如果你在 10 个元素上设置宽度，就会变得很痛苦。如果您可以在一个元素上设置宽度并将所有子元素表示为百分比，那么维护起来会容易得多。