gpt4 book ai didi

android - Android 版本 2.2.1 和 2.3.5 以及屏幕尺寸为 240 * 320 和屏幕尺寸为 480 * 800 的 android 设备如何使用媒体查询?

转载 作者:太空狗 更新时间:2023-10-29 13:29:43 25 4
gpt4 key购买 nike

我必须使用尺寸为 304 * 250 的图像。

它在 320 * 480 和 720 * 1280 屏幕尺寸下完美运行。

现在当我想在 240 * 320 的屏幕尺寸和 480 * 800 的屏幕尺寸中检查相同的内容时? 背景图片和数据值都看不到。

采取的补救措施:

我想到了使用框阴影代替图像。我实现了它并在 320 * 480 的屏幕尺寸上进行了测试。非常完美。

我想到了使用 Media Query

在 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" />

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

它不访问上面提到的媒体查询 css。

尝试过的解决方案

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

这是一个更小的设备,并采用了第二个 CSS-min-width: 240px

最佳答案

以下是您的媒体查询无法正常工作的几种可能性。

  1. 当您使用媒体查询 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 样式将覆盖媒体查询内部的样式。因此,如果存在特定于设备分辨率的样式,则必须将它们包装在媒体内部查询。

    与设备分辨率无关的样式,例如在所有分辨率下都相同的标题颜色,应该在媒体查询之外。

  2. 一个可能的问题是媒体查询与设备的分辨率不匹配。

  3. 另请检查您尝试查看的方向。

  4. 如果您在浏览器上进行测试,只有当您减小浏览器的宽度以满足媒体查询时,您才会在媒体查询中看到样式。很重要!因为通过使用媒体查询,你告诉浏览器只有在宽度达到这么多时才应用它。例如,要查看最大宽度 241px 的媒体查询中的变化,您需要将浏览器的宽度减小到小于 240px(只需将浏览器的宽度减小到非常小)

您可以尝试针对分辨率为 240*320 的设备执行以下媒体查询。

我想我找到了解决您问题的方法,您需要从媒体查询中删除 -device-(在浏览器上测试?)

@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 的设备执行以下媒体查询

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

注意:对媒体查询要非常谨慎。当您设置最小值和最大值时,它们将适用于满足最小值和最大值的所有分辨率。例如,上面的媒体查询将适用于宽度大于 480 的所有设备。

关于android - Android 版本 2.2.1 和 2.3.5 以及屏幕尺寸为 240 * 320 和屏幕尺寸为 480 * 800 的 android 设备如何使用媒体查询?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17102161/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com