如何實現具有小屏幕的android設備的媒體查詢？

我正在開發一個手機差距項目。我已經實施了滑動視圖功能。我已經使用了圖片作爲背景文字。 圖像尺寸約爲304 * 250如何實現具有小屏幕的android設備的媒體查詢？

它是在320 * 480和720 * 1280

屏幕尺寸的屏幕尺寸可以正常使用現在，當我想檢查在屏幕尺寸相同240 * 320和480 * 800的屏幕尺寸？ 不能看到背景圖像和數據值。採取

補救步驟：

我想使用箱陰影而不是圖像的。我實現了它，並在320 * 480的屏幕尺寸上進行了測試。它非常完美。

我想用媒體查詢

測試相同的240 * 320和480 * 800的屏幕尺寸的屏幕尺寸，我從here簡稱，我試圖實現它，但我沒有成功。

我的正常的CSS

.container 
{ 
    width:80%; height:auto; margin-left:10px; margin-right:10px; background-color:#CCCCCC; text-align:justify; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; min-height:250px; 
}

我的媒體查詢CSS

@media only screen and (max-device-width: 240px) 
{ 
    .container 
    { 
     width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ; 
    } 
}

我呼籲通過以下方式

<link rel="stylesheet" type="text/css" href="css/common_set.css" />

問題的CSS： 它沒有得到執行。我看不到盒子。它只是一個空的屏幕。

我的執行過程中是否有錯誤？

來源

2013-06-12 user

我不知道，如果你在你的應用程序做的，但在這裏你有兩個分號在你的CSS代碼

@media only screen and (max-device-width: 240px) 
{ 
    .container 
    { 
     width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; **;** 
    } 
}

來源

2013-06-12 07:49:29 Cana

是的，我在我的應用程序中犯了這個錯誤。但是，即使在糾正之後。輸出視圖 – user

沒有任何改變...請 – user

嘗試使用更大的最大設備寬度，例如最大設備寬度：300px – Cana

首先結束在你的HTML文件中添加這個元標記。

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

來源

2013-06-12 11:40:25

謝謝你，任何其他建議。這是行不通的 – user

如何實現具有小屏幕的android設備的媒體查詢？

回答

相關問題