CSS媒体查询在本地看起来不错，但在联机托管时就不好了

在本地，我的

banner-home2.png

看起来就像我需要的一样

然而，当上传它的大小变得更大。（我在heroku上托管这个，但是css文件在Amazon上）

我可以看到，在这些照片中，它看起来也是错误的（比它应该的大）：

网上版本：

:

本地版本（正确大小）：

代码笔：

以下是我在亚马逊上的媒体查询：

<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/home.css">

---

只需修改此

。my_home\u banner\u图像

类添加

顶部

，并减少网站中的

宽度

，即可

@media (min-width: 1281px)
.my_home_banner_image {
    bottom: 0;
    position: absolute;
    right: -0px;
    bottom: 0;
    z-index: 0;
    width: 55%;
    top: 25px;
}

内部home.css第296行

---

可能是因为服务器端HTML、CSS或任何其他语言版本与我们使用的localhost不同。但是你可以像我上面说的那样设置超过1281个屏幕大小。

你是手动部署新的css吗？关闭，但不需要添加

top:25px

；它将图像移到了横幅外。是的，您必须添加顶部0或某些值并减小宽度

@media (min-width: 1281px)
.my_home_banner_image {
    bottom: 0;
    position: absolute;
    right: -0px;
    bottom: 0;
    z-index: 0;
    width: 55%;
    top: 25px;
}

@media (min-width: 1281px)
.my_home_banner_image {
bottom: 0;
position: absolute;
right: 0;
bottom: 0;
z-index: 0;
width: 40%;
}