我想要一個網站，我正在設計與最常見的屏幕分辨率配合良好，並且我正在考慮以下方式來實現該目標。根據javascript檢測到的基於屏幕寬度修改佈局的缺點
- 設計適合於每個分辨率的css類（指定寬度和位置等屬性）。
- 使用適合默認分辨率的css類來設置元素的HTML代碼。
- 使用javascript（screen.width屬性）檢測屏幕寬度。
- 如果檢測到的寬度足夠接近更合適的分辨率，可使用javascript動態刪除適合默認分辨率的所有css類，並用適合更合適分辨率的css類替換它們。
這種方法有什麼大問題嗎？
不要這樣做，因爲你在你的問題中寫道。有一個更簡單的解決方案。
使用media queries和一個JavaScript polyfill使它在沒有本地支持的瀏覽器中工作。我喜歡Respond.js。
黃金法則是：從不使用Javascript來設計網頁風格。通常對於複雜的應用程序，有一些例外可以使用JS來構建動態的用戶界面/佈局，但只要有可能，就避免它。
創建一套適用於所有分辨率的CSS規則。如果您想要定位諸如手機等極端分辨率，則可以使用媒體選擇器，但對於所有其他情況，請使用單一佈局。
那麼你的建議背後的原因是什麼？ – 2012-03-28 22:38:59
@LynHeadley使用適當的工具完成不同的任務。 Javascript旨在用於功能性，而不是演示文稿。您不僅可以花更多時間處理常規HTML/CSS容易實現的內容，而且您的網站加載速度也會明顯更長。特別是在移動設備上。不要試圖將JS粘在不屬於它的地方。 – zatatatata 2012-03-28 22:45:57
@VahurRoosimaa你的黃金法則只適用於面向公衆的網站，它必須支持非JS瀏覽器。但是，對於非公開的Web應用程序，使用客戶端（JS）生成HTML的設計要簡潔得多，因爲服務器無需知道數據將以什麼格式顯示（XML，JSON， HTML，Swing，Objective-C）我已經工作了12年，設計純粹基於JS的Web應用程序，應用程序服務器不發送單行HTML。 – 2012-03-28 23:14:07
媒體查詢如上工作的高度注意！
另一種考慮是在純CSS中使用'@ media'查詢。這種方法的一個優點是，如果JS被禁用/不可用，它將起作用。 – GregL 2012-03-28 22:05:14
你是否認爲完全使用CSS進行媒體查詢？有關信息，請參閱http://mislav.uniqpath.com/2010/04/targeted-css/。 – jfriend00 2012-03-28 22:07:17
我同意，但使用@media查詢檢測設備似乎相當不可靠。 – 2012-03-28 22:09:37