Question

我正在开展电话差距项目。我实现了滑动视图功能。我用图像作为文本的背景。 图像尺寸约为304 * 250。

完美的屏幕尺寸为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; ;
    }
}

我已按以下方式调用CSS

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

问题： 它没有实现。我看不到盒子。它只是一个空屏幕。

我的实施是否有任何错误？

Answer 1

我不知道你是否在你的应用中做到了，但是你的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; **;**
   }
}

Answer 2

首先在你的html文件中添加这个元标记。

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

如何为小屏幕的Android设备实现媒体查询？

2 个答案: