语义HTML5 CSS3响应式设计

Question

在阅读了大量关于使用HTML5和CCS3进行响应式网页设计的书籍后，我开始搜索可以使用的示例模板。

然而，我遇到的一切似乎都使用了我不熟悉的CSS网格。有许多可用的框架，它们似乎都使用网格系统。当我查看源代码时，它似乎与我所读到的一切背道而驰。他们仍然在使用divs，而没有使用任何像和这样的HTML5标签，因此是非语义的。我想在没有CSS网格的情况下建立响应式网站，以便它是语义的。有人能帮我从哪里开始吗？我希望看到一个不使用网格系统的响应式网页的例子。

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

Answer 1

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

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

Answer 2

我不认为这些框架与您所读到的关于语义HTML5标记的一切背道而驰。只是框架没有内容的事实，而内容才是使用<section>、<article>、<header>等的驱动力。在一个普通的<div>标签上。作为开发人员，您是通过使用HTML5标记为代码带来语义含义的人。

我发现真正了解响应式设计如何工作的唯一方法就是潜入并开始编码。创建一个简单的布局，应用不同的媒体查询，并习惯于使用百分比与固定宽度。我敢打赌，在你浏览了几个页面后，你会开始觉得更舒服，而且计划如何布局你的网站也会变得容易得多。

因为每个站点都是不同的，所以我看不出你希望人们给你提供什么样的例子作为一个起点。如果您没有使用框架并从头开始编码，我建议从以下媒体查询开始：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/