2012-12-24 39 views
2

在阅读了许多关于响应式网页设计的书籍之后,我开始搜索示例模板以供玩耍,其中包括HTML5CCS3语义HTML5 CSS3响应式设计

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

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

回答

1

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

说了这些之后,您根本不必从一个框架开始 - 但我的建议是限制需要更改大小的元素的数量以使事物响应。例如,如果您在10个元素上设置宽度,则会变得很痛苦。如果您可以在一个元素上设置宽度,并将所有子元素用百分比表示,则维护起来会更容易。

+0

感谢您的意见,但是我找的例子真的,我看过很多很多的问题,但我期待举例来帮助我开始。 – LeeTee

0

我不认为框架会违背您阅读过的所有关于语义HTML 5标签的内容。这仅仅是框架没有内容的事实,而内容是使用<section>,<article>,<header>等的驱动。通过普通的<div>标签。作为开发人员,您是使用HTML 5标记为代码带来语义含义的开发人员。

我发现要真正得到响应式设计是如何工作的一个良好的手感的唯一办法是潜水和获得编码。创建一个简单的布局并应用不同的媒体查询,并习惯于使用百分比与固定宽度。我敢打赌,你通过你会开始感觉更舒服几页后得到,它会变得更加容易对你将如何布置你的网站的计划。

由于每个站点将是不同的,我不看你希望什么样的例子,人们会为您提供为您作为起点使用。如果你不使用框架,并开始编写代码,我建议这一套媒体查询开始:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/