我建立的網站，並希望使其移動響應。如何創建具有響應式設計的網站？

它完全適用於Chrome和Firefox，但不適用於移動設備。

我在Inspect上進行了測試，但它在桌面瀏覽器上正常工作，但不適用於手機。

我該如何解決這個問題？

2016-05-16 Guru

您的問題非常廣泛。有很多方法可以處理響應式網站設計，但是StackOverflow的目的是爲非常結構化和特定的問題和疑問提供具體和特定的答案。你可以分享你的嘗試，這不完全正確嗎？ – GMchris

當我將瀏覽器寬度調整爲320px時，它在桌面上完美運行。但在移動不能正常工作。我怎樣才能解決這個問題？有什麼工具像瀏覽器在移動瀏覽器上使用Inspect Elements？ – Guru

再一次，很難說沒有看到它，甚至沒有描述過什麼是「突破」。如果可以的話，發佈一個jsfiddle。 – GMchris

首先，您應該在HTML頁面上添加一個視口。

鍵入此頭標記內：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

然後，我個人認爲這是更好，如果你鏈接bootstrap.css文件。我也推薦使用這樣的CSS媒體屏幕：

@media screen and (max-width: 800) { /* The CSS codes when the device is less than 800 go here */ } 至少，這就是我的做法。

你可以下載或觀看我在YouTube上看到的視頻。我不記得它的名字或鏈接，但它的長度超過一個小時，這傢伙正在製作一個健身房網站的網頁。

我強烈建議您自己輸入這些內容，而不是複製和粘貼它，這將有助於您理解每件事情的含義，不要忘記代碼，以便在簡單的情況下不要提及這些類型。

2016-05-16 17:16:01

感謝您的幫助。但我沒有要求移動響應標準。在桌面上調整窗口大小工作正常。但不是在手機上。 – Guru

我還沒有看到有人在幾年內使用大寫的文件擴展名... – Martin

嗯，我不確定，但我認爲你的手機可能會比800大，所以你可能想要添加另一個更大的媒體屏幕或編輯這一個。糾正我，如果我誤解了這個問題。 –

如何創建具有響應式設計的網站？