Question

我目前正在设计一个网站，在移动设备上显示时，我不确定如何处理封面图片的大小。 Aka目前在移动设备上看起来很大，我想让它适合移动设备。

桌面的（完美工作）代码：

#cover {
    background: url('...') 50% 0 repeat-y fixed;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    color: #ffffff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

对于手机，我添加了以下内容（980,768和760的不同部分）：

@media (max-width: 980px) {

    #cover {
        height: 65vh;
        background: url('');
        width: auto;
        max-width: 100%;
    }

但它仍未在移动设备上正常显示（与桌面大小相同）。我应该在固定和居中位置的@media代码中添加任何内容，还是添加与确切维度相关的更多代码？我已经尝试了很多，但我有点卡住了......非常感谢你的帮助！：）

Answer 1

问题出在第一行：

css-loader

这是一个单行速记：

background: url('...') 50% 0 repeat-y fixed;

background-image : url('...'); background-position-x : 50%; background-position-y : 0; background-repeat : repeat-y; background-attachment: fixed;是问题所在。如果你删除它，它可以工作，图像居中：

background-attachment: fixed

#cover {
    background : url(http://via.placeholder.com/800x600) 50% 0 repeat-y;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    height: 100vh;
    border: blue dashed 2px;
}

@media (max-width: 980px) {

    #cover {
        height: 65vh;
        width: auto;
        max-width: 100%;
        border: red dashed 2px;
    }
}

如何制作适合移动设备的封面图片？

1 个答案: