將媒體查詢用於移動設計的最佳方式

我知道媒體查詢是什麼以及它們爲什麼被使用，但我不確定如何使用它們開發移動網站的最佳方式。將媒體查詢用於移動設計的最佳方式

例如：我有mysite.com，它有一個包含所有必要樣式的樣式表（假設它是一個非常大的文件）。在這一點上，我的樣式都沒有針對較低的屏幕分辨率或其他設備。

然後我決定製作我的網站的移動版本。爲了簡單起見，我現在只定位iPhone用戶，如果代碼檢測到某人在iPhone上訪問我的網站，他們將獲得移動版本。

我的問題：哪裏是包含這些額外樣式的最佳位置，以便用戶看到移動版本？我是否應該將這些樣式包含在原始樣式表中，還是將它們分離到自己的樣式表中會更好？

說我的網站完全用浮游物建成，但我的移動版本將只顯示堆疊在彼此頂部的每個元素。如何顯示使用媒體查詢？是否像聲明float一樣簡單：無;或者其他的東西？

基本上，我想在上面的段落中要問的是，我如何構建我的樣式表，以便例如基本顏色和鏈接位置或任何在移動版本中保留的任何東西版本，但有不同之處，比如在移動版本中將所有內容堆疊在一起？

樣式表的媒體查詢部分中的規則是否基本上'超越'了您在非媒體查詢部分中聲明的內容？

我發現了很多使用媒體查詢的例子，但我找不到完整站點的一個工作示例。如果我在同一個HTML頁面中鏈接了mobile.css和main.css，它們是如何協同工作來保留我的網站在手機版中的某些方面，但改變了其他方面？

最後一個問題：有可能有一個完全固定寬度的設計，但仍然使用媒體查詢？代碼仍然能夠檢測到瀏覽器縮小或擴展超過某個寬度/高度時，是否正確？

對不起，很可能是令人困惑的問題。我希望你能告訴我想問什麼。

來源

2011-09-09 Mark Bubel

有（至少！）四種方式來做到這一點：

普通CSS，有媒體查詢在底部（這樣它們覆蓋上述CSS）
兩個（或更多）的CSS文件使用鏈接元素媒體查詢
服務器端的檢測，增加了不同的CSS鏈接在HTML
服務器端檢測，然後重定向至m.example.com上，或example.com/mobile

裝

如果你正在說輕微的變化（float：none，不同的字體大小等），那麼我會去1. 如果有很多很多的CSS更改，我會使用2或3（3 isn就像你依賴使用者而不是屏幕屬性一樣好）。如果HTML和CSS發生變化，我會使用4.

對於所有這些，請檢查您在Internet Explorer 6-8中的工作，他們可能會忽略媒體查詢並使用所有CSS，包括移動位使用1。

在使用1和2

這裏看看http://mediaqueri.es/對網站的一些實例是另一種資源，可以幫助：https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

來源

2011-09-09 15:52:24

太好了，謝謝！我會檢查這些 –

我建議選擇3

用戶代理嗅探來檢測設備不錯。多年來，創建移動網站一直是不變的。使用PHP device detection，您可以在不同設備上更好地控制您的網站。您不僅可以選擇CSS文件轉到哪個設備上，還可以選擇每個設備類別加載哪些資產/標記;手機，平板電腦，臺式機，電視等

通過這種方法，可以確保手機沒有收到桌面資產/風格/標記，反之亦然，即使已禁用JavaScript。

來源

2011-12-15 19:30:30 hybrid

我建議不與移動瀏覽器/設備檢測在所有鬼混;這是媒體查詢擅長的地方。更有機地思考，而不必不斷用新設備和移動瀏覽器更新您的網站，只需使用一個CSS文件，並利用CSS3的最大寬度/最大設備寬度。

將<meta name="viewport" content="width=device-width"/>在你的頭，並在你的CSS文件解析成一個桌面版和移動版：

/* Desktop Version */ 

@media screen { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
} 

/* SmartPhone Version */ 

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/m_bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
}

來源

2012-01-10 10:16:54

我不建議選擇3嗅探已經證明一個不錯的選擇時間和時再次。當設備/瀏覽器顯示錯誤信息時會發生什麼？它很容易被劫持。

不要這樣做。媒體查詢一路。它是支持的標準。

來源

2015-04-01 23:34:53 Splic3

將媒體查詢用於移動設計的最佳方式

回答

相關問題