通过上面的介绍,大家对响应式设计有了一定的了解,但在实际制作中还是有一些布局技巧的:
在 Responsive 布局中,可以毫无保留的丢弃:
- 尽量少用无关紧要的 div;
- 不要使用内联元素(inline);
- 尽量少用 JS 或 flash;
- 丢弃没用的绝对定位和浮动样式;
- 摒弃任何冗余结构和不使用 100%设置。
有舍才有得,丢弃了一些对 Responsive 有影响的东东,那么有哪些东东能帮助 Responsive 确定更好的布局呢?
- 使用 HTML5 Doctype 和相关指南;
- 重置好你的样式(reset.css);
- 一个简单的有语义的核心布局;
- 给重要的网页元素使用简单的技巧,比如导航菜单之类元素。
使用这些技巧,无非是为了保持你的 HTML 简单干净,而且在你的页面布局中的关键部分(元素)不要过分的依赖现代技巧来实现,比如说 CSS3 特效或者 JS 脚本。
说了这么多,怎么样的布局或者说 HTML 结构才是简单干净的呢?这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式(以及与样式相关的信息),在浏览器中打开,如果你的内容排列有序,方便阅读,那么你的这个结构不会差到哪里去。