爲什麼手機瀏覽器中的標題重疊？

Question

在移動瀏覽器中查看時，如何使標題區域在http://androdevlab.com處不重疊？

Answer 1

您應該使用媒體查詢。你可以在這裏閱讀更多有關媒體查詢：

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相同，則應使用媒體查詢。使事情更容易處理。

Answer 2

你應該使用各種responsive design技巧。像設置：元視口標記，@media查詢調整後的CSS。使用％或em來指定頁眉的邊距和大小，而不是其他大小的px等，您可以使用像syze這樣的js庫和像html5boilerplate這樣的項目來幫助您。