移動HTML5應用程序的媒體查詢

我已經基本上瘋了試圖找出/谷歌出來。 iOS設備不是一個問題，因爲沒有那麼多，它容易設置爲每一個，但Android和可能黑莓進入遊戲...移動HTML5應用程序的媒體查詢

基本上我有4大小（S，M， L，XL）的CSS，但隨後出現了像「HTC One」這樣的手機，它擁有全高清（1920x1080）和4.7英寸......如何計算此值？有沒有像覆蓋大多數框架的框架？你好嗎？我如何覆蓋大多數設備？

乾杯， ķ

2013-08-21 Karington

您可以在媒體查詢中使用'-webkit-min-device-pixel-ratio'和'min-resolution'來定位高分辨率設備。看到這裏：http://bjango.com/articles/min-device-pixel-ratio/ –

你可以找到一個適當的答案你的問題在這裏：http://stackoverflow.com/questions/16490175/in-terms-如何處理高分辨率手機，如 –

好吧，我可以說，我親自處理的方式，這是這樣的：

<link rel="stylesheet" href="./css/base.css" type="text/css" media="all"> 
<link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)"> 
<link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)"> 
<link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" >

所以我基本上有三個CSS文件，並根據的寬度屏幕，每一個都會自動加載。最後一個是任何1236或更高的東西。

這是你在找什麼...或者我想念你在問什麼？

來源

2013-08-21 22:41:58 Charlie74

嗨，感謝您的評論，但我需要的是具有屏幕尺寸和DPI的移動設備...我認爲這個解決方案只適用於DPI類似的桌面屏幕。就像我上面說過的那樣「但是隨後出現了像」HTC One「那樣的全高清（1920x1080）和4.7英寸的手機，在你的例子中如果他想使用」1236_grid.css「，他會得到非常小的元素...... – Karington

@ Charlie74：這是使用媒體查詢的一種非常糟糕的方式！首先，因爲在不同文件中分離你的樣式會導致額外的請求，因爲瀏覽器將加載所有CSS文件（不僅僅是它的規則匹配的文件）。其次，僅使用'min-width'會導致應用（和覆蓋）所有樣式，這可能導致瀏覽器在您的情況下重新渲染頁面四次。這兩件事情都絕對應該避免，特別是對於移動設備！最後但並非最不重要的一點是，媒體查詢規則應該使用EM而不是像素。 – Netsurfer

@ Charlie74和Netsurfer。媒體查詢可以在標題中使用，因此只加載一個css文件。瀏覽器窗口調整大小時有一個缺點，但除了開發人員檢查網站的響應能力之外，開發人員會多次執行此操作。 – otherDewi

在您的媒體查詢中，您可以使用max-device-width而不是max-width。 max-width將針對支持媒體查詢的任何內容，但max-device-width將基於屏幕而不是窗口進行定位。「描述輸出設備的寬度（表示整個屏幕或頁面，而不僅僅是渲染區域，如文檔窗口）。」 *資料來源：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media all and (max-device-width:1920px){ 
/* this will target any device up to 1920px */ 
}

或者，如果你知道的分辨率，可以將它們組合起來：

@media screen and (min-resolution: 2dppx) and (max-device-width:1920px) { ... }

來源

2013-10-29 23:44:47

好不好，我認爲對於屏幕的每個大小不匹配創建一個特殊的CSS樣式表完美的「響應式設計」溫度。那麼你應該創建一個基於最大屏幕的第一個CSS爲您的網站，或從最小的（移動第一）開始將您的網站使用。然後，你只需要添加一個媒體查詢塊在你的CSS是這樣的： @media all and (max-width: *Size of screen*px) { *Your css here* } 改變一個元素，每次他看起來奇怪或統一。

有了這個技巧，還可以使用視元標記<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">至極將禁用規模的用戶，並自動適應窗口完全適合您的網站上每個屏幕（甚至是智能手機）。

我甚至不知道它是否真的能幫助你，但我認爲這是標記，讓您細節尺寸特定的樣式表是真的不是很好的方式是很重要的，導致有一百萬個不同的屏幕尺寸的。

然後你也可以使用一個CSS 格，像960 Grid System或Twitter Bootstrap。

看看這裏獲取更多的信息：http://socialdriver.com/2012/06/a-responsive-web-design-tutorial-for-beginners/

來源

2013-10-31 12:06:22 Natuu

+1提到Twitter Bootstrap和960網格系統，更好地依靠CSS框架而不是依靠自己的CSS。我寧願**沒有**去你的第一段。至於第二段，最好不要提最大比例尺，以便用戶可以放大，如果由於某種原因他需要更大的文字。初始規模是必須的 – gldraphael

我明白你Karington，

不要與其它複雜的即時CSS和JS文件處理。您可以根據自己的需要製作自己的網站。

使用這些媒體查詢：

Media Queries for Web Design

和設計您的網站。

Test your Responsive Web Design