如何使用媒体查询Android设备与Android版本2.2.1和2.3.5和他们的屏幕尺寸240 * 320和屏幕尺寸480 * 800？ [英] 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。
现在当我想检查相同的屏幕尺寸240 * 320和屏幕尺寸480 * 800？ 既不会看到背景图片也不会看到数据值。
采取的补救措施：
我想到使用框阴影而不是图像。我实现它，并在320 * 480的屏幕尺寸测试它。它是完美的。
我想测试相同的屏幕尺寸240 * 320和屏幕尺寸480 * 800使用媒体查询
我从这里，我试过实现它，但是我不成功。
我的普通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 b
$ b
@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 =stylesheettype =text / csshref =css / common_set.css/&
问题：
它没有得到实现。
解决方案TRIED
< meta content = 'width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = 0'name ='viewport'/>
我的实现中是否有错误？请帮助!!
澄清，如果我理解了答案的第一点：
.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;
}
}
这是一个较小的设备， - 最小宽度：240像素
这几种可能性会导致您的媒体查询无效。
-
当您使用媒体查询CSS时，是否删除了常规CSS？还是你保留了两个？如果你想有两个，那么你需要保持它们适当的其他正常的CSS将重写一个内部媒体查询。
例如，如果你的css是这样的。 ..
@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在媒体查询之外的样式将覆盖媒体查询内的样式。如果有特定于设备分辨率的样式，那么您必须将它们包装在媒体查询内。
与设备分辨率无关的样式，例如像所有分辨率相同的标题颜色都应在媒体查询之外。
-
一个可能的问题是媒体查询与设备的分辨率不匹配。
-
此外，请检查您尝试查看的方向。 p>
-
如果您在浏览器上进行测试，则只有当您缩小浏览器的宽度以满足媒体查询时，才会在媒体查询中看到样式。很重要！因为通过使用媒体查询你说，浏览器应用这只有当宽度是这么多。例如，要查看最大宽度241像素的媒体查询内的更改，您需要将浏览器的宽度减小到小于240像素（只是将浏览器的宽度减小到非常小）
您可以尝试以下媒体查询240 * 320分辨率的设备。
对于您的问题，您需要删除-device-从媒体查询（在浏览器上测试？）
@media only屏幕和-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
@media only screen
and（min-width：480px）
{
/ *样式* /
}
注意：对媒体查询必须非常小心。当设置min和max时，它们将应用于满足最小值和最大值的所有分辨率。例如，上述媒体查询将应用于宽度大于480的所有设备。
I had to use an image which was of size 304 * 250.
It is working perfectly in screen size of 320 * 480 and screen size of 720 * 1280.
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.
Remedial step taken:
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.
I thought of testing the same in the screen size of 240 * 320 and screen size of 480 * 800 using Media Query
I referred from here and I tried implementing it, But I was not successful.
My normal 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;
}
My Media Query 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; ;
}
}
I have called the CSS in the following manner
<link rel="stylesheet" type="text/css" href="css/common_set.css" />
Problem: It did not get implemented.I cannot not see the box.It was just an empty screen.
It does not access the media query css the one mentioned above.
SOLUTIONS TRIED
<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!!
To clarify,if i have understood the 1st point of the answer
.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; ;
}
}
Is this correct? but my output comes according to the container CSS... and i am test it on a device not browser
edit: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;
}
}
It is a smaller device and is taking the 2nd CSS- min-width: 240px
These are few possibilities why your media query is not working.
When you used media query CSS, did you remove your normal CSS? Or did you keep both? If you want to have both, then you need to keep them appropriately else normal CSS will over write the one inside media query.
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; ; }The
.containerstyle 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.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 media query.
One possible issue can be media query is not matching with the resolution of the device.
Also please check in which orientation you are trying to view.
If you are testing on browser you will see the styles inside media query only when you reduce the width of the browser to satisfy the media query. Very important! Because by using media query you say to browser that apply this only when width is this much. For example to see the changes inside media query of max-width 241px you need to reduce the width of your browser to less than 240px (just reduce the width of browser to very minimal)
You can try following media query for a device of resolution 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; ;
}
}
You can try following media query for a device of resolution 480*800
@media only screen
and (min-width : 480px)
{
/* Styles */
}
Note: Be very cautious with media queries. when you set min and max they will apply for all the resolutions which satisfy the min and max.For example the above media query will apply for all devices whose width is greater than 480.
这篇关于如何使用媒体查询Android设备与Android版本2.2.1和2.3.5和他们的屏幕尺寸240 * 320和屏幕尺寸480 * 800？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
