2

在阅读了一些关于响应式网页设计的书籍之后HTML5，CCS3我开始搜索示例模板来玩弄。

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

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

4

2 回答 2

1

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

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

于 2012-12-24T11:10:00.197 回答
0

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

我发现真正了解响应式设计的工作原理的唯一方法是深入研究并开始编码。创建一个简单的布局并应用不同的媒体查询，并习惯使用百分比与固定宽度。我敢打赌，在您浏览了几页之后，您会开始对它感到更舒服，并且计划如何布局您的网站会变得更加容易。

由于每个站点都会有所不同，因此我看不出您希望人们提供什么样的示例供您用作起点。如果您没有使用框架和从头开始编码，我建议您从这组媒体查询开始：http ://css-tricks.com/snippets/css/media-queries-for-standard-devices/

于 2012-12-24T12:45:41.990 回答