2012-07-31 28 views
2

我有一個需要快速移動升級的舊網站。我已經研究過這個,並且在開始一個新項目時發現了很多關於如何做到這一點的很好的答案。我很好奇,看看有沒有人有這樣的經驗,如果有的話,哪種方法最適合這種工作?我試過近代化而不能讓它返回任何媒體查詢(Modernizer.mq)爲手機改造一箇舊的XHTML網站?

這裏真的是我試過的代碼:

Modernizr.load([ 
{ 
test : Modernizr.mq('screen and max-device-width: 480px'), 
yep : 'css/mobile.css', 
    nope : 'css/styles.css' 
]); 

回答

2

有效的媒體查詢是only screen and (max-device-width: 480px)

僅限用於我現在不記得的錯誤,但它不會在其他瀏覽器中破壞任何內容,所以沒關係。

您必須包圍括號內的最大寬度規格。

但是,你不應該依靠Javascript來加載你的css文件。您可以將它們包含在內

<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 480px)" 
<link rel="stylesheet" type="text/css" href="screen.css" media="only screen and (min-device-width: 481px)" 

對於非媒體查詢支持的瀏覽器,您可能需要回退。

+1

完全比我做的更好。有人告訴我使用Modernizr,但我意識到它對於使用html5/css3的站點的實際情況是想要支持後備。 – jhoffmcd 2012-08-03 22:11:30