为什么标题在移动浏览器中重叠？

Question

在移动浏览器中查看时，如何使标题区域在http://androdevlab.com处不重叠？

Answer 1

你应该使用各种responsive design技巧。比如设置：meta viewport标签，@ media查询调整后的css。使用％或em而不是其他设置大小的px来指定标题中的边距和大小等。您可以使用syze之类的js库和html5boilerplate之类的项目来帮助您解决此问题。

Answer 2

您应该使用媒体查询。您可以在此处阅读有关媒体查询的更多信息：

http://www.w3.org/TR/css3-mediaqueries/

http://reference.sitepoint.com/css/mediaqueries

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

您还可以使用FitText.js等插件 - http://fittextjs.com/

在Firebug中查看您网站的代码，主要问题是“在纽约的安卓设备的便携式实验室送到您家门口”的行高太大了。它目前在'1.8'没有价值。尝试将其设置为较小的值1em或1.25em。同样适用于nav-primary li a类。

此外，nav元素的宽度定义为980px，因此在任何设备上，这都是固定值。也许您可以尝试设置基于％或em的值。

如果您需要更改移动版本的许多元素，同时保持@screen CSS不变，则应使用媒体查询。使事情更容易处理。