Home / Questions / 55824
Accepted
IngErick
Asked: 2020-03-17 08:48:36 +0800 CST 2020-03-17 08:48:36 +0800 CST

媒体查询 CSS 的问题

  • 772

早安，同志们。我提出以下问题。

我有一个媒体查询要在我的主人身上放一张壁纸，位于body。

body {
    background : url('../../escritorio.png');
    background-size : cover !important;
    background-repeat : no-repeat !important;
    background-position : center center !important;
    background-attachment : fixed !important;
    background-color: #464646;
}

@media only screen and (max-width:768px) {
    body {
        background : url('../../movil.png');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
}

在桌面问题上，一切都很完美，但在使用 Safari 移动版甚至 Chrome 移动版本身时。在 Safari 中，图像在我看来已经过时，就好像我在浏览器中使用图像，而在 Chrome 中它甚至没有显示图像。

作为一个额外的事实，我已经在我的主人中包含了元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

PS 在唯一适合我的浏览器中是在 Win 10 移动版的 IE 中。

PD2 附加图片显示它在 Win 10 移动版的 IE 中的显示方式以及在 android 的 chrome 移动版中的显示方式

赢10个手机

安卓 chrome 手机

html

1 Answers

  1. Best Answer

    在一个接一个地改变样式之后，我终于找到了适合我的组合，我不能保证它适用于每个人或者它是最好的答案，但这里是 CSS 代码：

    html, body {
    height: 100%;
}

html {
    overflow-y: hidden;
}

body {
    overflow-y: scroll;
    background: url('escritorio.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

@media (max-width:768px) {
    body {
        background: url('movil.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

    我希望它有帮助！

    • 0