如何適應移動設備

我已經建立了一個在PC，筆記本電腦和Ipad設備上功能齊全的網站。我想擴大它以採取移動電話。我遇到的問題是我不確定最好的方法來做到這一點。我目前在我的網站中使用主題。我認爲做到這一點的最好方法是檢測設備並根據它是手機還是PC來更改主題。我發現的很多例子展示了當你連接樣式表時如何做到這一點。如何適應移動設備

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

我應該通過鏈接的樣式表這樣做，或者我可以做到這一點與不知何故一個主題？

來源

2012-08-17 jackncoke

您正處於正確的軌道上面。這是一個很好的研究起點：http://www.alistapart.com/articles/responsive-web-design/ – 2012-08-17 13:07:19

不幸的是，你最後通過添加移動支持來做到這一點很困難。對於您的下一個項目，我強烈建議[移動第一響應式設計]（http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/）方法。 – jrummell 2012-08-17 13:09:23

好問題，我會在1周後處理它 – GLES 2012-08-17 13:23:12

大多數Desktop + Mobile主題的工作方式與以下代碼類似。最好的方法是使用@media查詢（check this link和this one）。不要使用更多的樣式表，只能使用其中一個。

@media screen and (min-device-width: 801px) { 
    /* Your style here */ 
} 

@media screen and (max-device-width: 800px) { 
    /* Your style here for mobile */ 
}

來源

2012-08-17 13:41:54

如何適應移動設備

回答

相關問題