如何使用媒体查询与Android版本2.2.1和2.3.5以及240 * 320的屏幕尺寸和分辨率为480×800的屏幕尺寸Android设备？ [英] How to use media Queries for android devices with android version 2.2.1 and 2.3.5 and their screen size of 240 * 320 and screen size of 480 * 800?

问题描述

我不得不使用图像的这是尺寸304 * 250的。

这是正常使用的720 * 1280 320 * 480屏幕尺寸屏幕尺寸。

It is working perfectly in screen size of 320 * 480 and screen size of 720 * 1280.

现在，当我想在480 * 800 240 * 320的屏幕大小的屏幕尺寸检查一样吗？ 无论是背景图片是待观察，也不是数据值。

Now When I wanted to check the same in a screen size of 240 * 320 and screen size of 480 * 800? Neither the background images were to be seen nor the data value.

补救一步跨出：

我想用一箱的影子，而不是形象。我实现它，测试它在320屏幕尺寸* 480.It是完美的。

I thought of using a box shadow instead of the image. I implemented it and tested it in screen size of 320 * 480.It was perfect.

我想用测试相同的480 * 800 240 * 320的屏幕大小的屏幕尺寸媒体查询

I thought of testing the same in the screen size of 240 * 320 and screen size of 480 * 800 using Media Query

我从<一提到href="http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/"相对=nofollow>这里，我试图实现它，但我没有成功。

I referred from here and I tried implementing it, But I was not successful.

我的正常的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的

I have called the CSS in the following manner

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

问题： 它没有得到implemented.I不可不看box.It只是一个空白屏幕。

Problem: It did not get implemented.I cannot not see the box.It was just an empty screen.

将不会访问CSS上面提到的媒体查询。

解决方案受审

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

有没有在我实施任何错误呢？请帮助！

Is there any mistake in my implementation? Please help!!

为了澄清，如果我已经明白了答案的第一点

    .name_layer
    {
         float:left; width:100%; padding:0; margin:0; line-height:35px; height:35px; color: #FFFFFF; font-size:20px;
    }
    .name_layer_text
    {
        margin-left:1%;
    }
    .swipe_body
    {
          padding:0; margin:0; width:100%; height:480px; 
    }
    .container
    {
             width:200px; height:10px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; 
    }
    @media only screen and (max-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，但我的输出来... ...，我的设备上测试它不是浏览器

编辑：2

    @media only screen and (max-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;
      }
    }       
    @media only screen and (min-width:240px)
    {
         .container
        {
                 width:250px; height:250px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; top:5px min-height:200px;
        }
    }

这是一个更小的设备，并正在采取第二CSS- 最小宽度：240px

推荐答案

这些都是一些possiblities为什么你的媒体查询是行不通的。

These are few possiblities why your media query is not working.

1。当你使用媒体查询的CSS你删除你的正常的CSS？或者你一直两者兼而有之？如果你想兼得，那么你就需要让他们适当的其他正常的CSS将超过写一个内部mediaquery。 例如，如果你的CSS是这样的...

1.When you used media query css did you remove your normal css? or you kept both ? if you want to have both, then you need to keep them appropriately else normal css will over write the one inside mediaquery. For example if your css is like this ...

@media only screen and (max-width: 241px) 
{
  .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; ;
  }
}

  .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; ;
  }

的.container风格即媒体查询外将覆盖一个媒体query.So内是否存在样式是特定于该设备的分辨率，则必须将它们包装在媒体查询内

The .container style which is outside the media query will overwrite the one inside the media query.So if there are styles which are specific to resolution of the device then you must wrap them inside the media query.

这是不相关的设备，例如像标题颜色的决议，是在所有分辨率同样应该是mediaquery之外样式。

Styles which are not related to resolution of the device for example like color of heading which is same in all resolutions should be outside the mediaquery.

2.One可能的问题能够得到媒体查询不与设备的分辨率相匹配。

2.One possible issue can be media query is not matching with the resolution of the device.

3.Also请检查您要查看的方向。

3.Also please check in which orientation you are trying to view.

4。如果您正在测试的浏览器，你会看到里面mediquery款式只有当你降低了浏览器，以满足媒体查询的宽度。很重要！通过媒体查询监守你说浏览器，应用此只有当宽度是此much.For例子来看看里面mediaquery，你需要减少你的浏览器的宽度小于240px最大宽度241px的变化。（只是减少宽度broswer的非常minimial）

4.If you are testing on browser you will see the styles inside mediquery only when you reduce the width of the browser to satisfy the media query. very important! becuase by using media query you say to browser that apply this only when width is this much.For example to see the changes inside mediaquery of max-width 241px you need to reduce the width of your browser to less than 240px.(just reduce the width of broswer to very minimial)

您可以尝试以下媒体查询resoltuion 240 * 320的设备。 我想我找到了你的问题的解决方案，你需要从媒体查询中删除-device-。（浏览器的测试？）

You can try following media query for a device of resoltuion 240*320. I think i found solution for your problem you need to remove -device- from media query.(testing on browser?)

@media only screen and (max-width: 241px) 
{
  .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; ;
  }
}

您可以尝试以下媒体查询分辨率的设备480 * 800

You can try following media query for a device of resolution 480*800

@media only screen 
and (min-width : 480px) 
{
/* Styles */
}

请注意：要非常谨慎与媒体queris。当您设置的最小值和最大值，他们将适用于所有符合分钟，max.For例如上面的媒体查询将适用于所有的设备，其宽度大于480 resoltuions。

Note: Be very cautious with media queris. when you set min and max they will apply for all the resoltuions which satisfy the min and max.For example the above media query will apply for all devices whose width is greater than 480.

这篇关于如何使用媒体查询与Android版本2.2.1和2.3.5以及240 * 320的屏幕尺寸和分辨率为480×800的屏幕尺寸Android设备？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！