JS VS媒體查詢網站設計

Question

我開始設計多個設備網站：臺式機/筆記本電腦，平板電腦（如iPad上，Galaxy Tab的，和移動設備（如iPhone手機）

我現在有一個例如，如果用戶在iPhone上訪問www.example.com，則他們將被重定向到m.example.com或t.example.com，如果他們在平板電腦上顯然這需要您創建可能的不同頁面要有相似的內容，而媒體查詢將允許你只是根據屏幕大小略微不同的東西。

所以它看到對我來說，媒體查詢將是處理不同屏幕分辨率的首選。這雖然給我留下了一些問題。舉例來說，您在桌面版網站上有一個導航欄，在移動網站上可以更好地使用類似select的內容。什麼是實施這個最好的方法？

對於我可能不連貫的散亂的道歉，但我想我的問題是什麼是實施網站的移動版本的最佳方式，其差異可能不僅限於佈局（例如，簡單的媒體查詢），但可能需要不同頁面上的元素？

Answer 1

媒體查詢通常是您嘗試實現的最佳解決方案。如果你開始爲單獨的設備創建單獨的版本，你會給自己一個真正的頭痛，試圖保持一切最新。有一組代碼可以適應用戶正在使用的設備，這會更好。

查看Twitter Bootstrap項目。這是一個現成的框架，可以幫助您將響應式設計放在一起。

Answer 2

要麼你可以創建一個視圖，一個js和一個css和處理在單一文件中的所有事物或有更好的表現，我建議使用MVC模式， 您將需要檢測用戶代理，然後在此基礎上加載相應的視圖+ css + js。 加載這樣的事情頁面+代理+ extention

比如：

home.web.html，home.tablet.html，home.mobile.html

home.web.js，回家。 tablet.js，home.mobile.js（你也可以用單一的js文件）

你可以把一個CSS可處理佈局通過媒體查詢

* 的js是佈局切換很慢。有複合設計模式如果您喜歡使用*

Answer 3

您可以通過使用CSS Media Queries實現，藉助媒體查詢，您可以爲不同的佈局維護css，並且可以隱藏不需要的移動設備。

Answer 4

是的正確。您可以爲桌面顯示Normal UL LI Nav，並使用meida查詢啓用移動版本的Select下拉導航。