语义HTML5 CSS3响应式设计



在阅读了一些关于HTML5CCS3响应式网页设计的书籍后,我开始寻找示例模板来玩。

然而,我遇到的一切似乎都使用了我不熟悉的CSS网格。有许多可用的框架似乎都使用网格系统。当我查看源代码时,它似乎违背了我所读到的一切。他们仍然使用divs,而不使用任何HTML5标签,如和,因此是非语义的。我想建立一个没有CSS网格响应的网站,使它是语义。有人能告诉我从哪里开始吗?我很想看到一个不使用网格系统的响应式网页的例子。

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

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

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

我不认为这些框架违背了你所读到的关于语义HTML 5标签的一切。这只是框架没有内容的事实,而内容是驱动使用<section>, <article>, <header>等的原因。而不是普通的<div>标签。作为开发人员,您是通过使用HTML 5标记为代码带来语义意义的人。

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

因为每个网站都是不同的,我不知道你希望人们提供什么样的例子作为你的起点。如果你没有使用框架和从头开始编码,我建议这组媒体查询开始:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

最新更新