与本地浏览器相比，部署时 CSS 字体大小和引导模式大小会发生变化答案

【问题标题】：CSS font size and bootstrap modal size changes when deploying compared to local browser与本地浏览器相比，部署时 CSS 字体大小和引导模式大小会发生变化
【发布时间】：2020-11-24 22:32:00
【问题描述】：

我创建了一个 web 应用程序，使用 plotly 和我的资产文件夹中的 CCS 文件。在本地运行应用程序时，一切看起来都很棒。但是，当在 Elastic Beanstalk 上上传到 AWS 时，我的字体会变得更大。最值得注意的是在引导组件（横幅和模态）中。我发现有几个人在问这个问题，并且我尝试了他们的解决方案（网页缩放和媒体最小宽度），但它似乎不起作用。有没有人有任何想法？我会非常感激，因为部署的应用看起来一点也不好看！

下面是相关代码（我认为）

CSS

body {
    background-color: white;
    color: black;
    margin: 0px;
    padding-left: 1vw;
    padding-right: 1vw;
    font-size: 10px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

h1 {
    font-family: "Open Sans";
    font-weight: bold;
    letter-spacing: 0.2em;
    font-size: 2.2em;
    padding-left: 0.9em;
}

h2 {
    font-family: "Open Sans";
    font-weight: bold;
    letter-spacing: 0.3em;
    font-size: 1.7em;
    padding-left: 0em;
    padding-bottom: 0.6em;
}

.username-login {
    float: right;
    padding-right: 1vw;
    padding-top: 3vh;
    display: inline-block;
    justify-content: left;
    text-align: left;
}

.username-text {
    text-align: center;
    padding-right: 0.5vw;
    display: inline-block;
    color: grey;
    line-height: 25px;
    /*justify-content: center;*/
}

Python 代码：

app = dash.Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    meta_tags=[
        {
            'charset': 'utf-8',
        },
        {
            'name': 'viewport',
            'content': 'width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1'
        }
    ]
)

#Info is the modal css but written as a python dictionary 

info_overall = {
    'zIndex': '100',
    'max-width': 'none',
    'overflow-y': 'auto',
    'max-height': '80vh',
    'position': 'relative',
    'margin': 'auto',
    'width': '80vw',
    'background': '#1e1e1e',
    'top': '18%',
}

info_body={
    'background':'grey',
    'display': 'grid',
    'grid-template-columns':'auto auto auto auto auto',
    'grid-template-rows': 'auto auto auto auto',
}

您可以看到已部署应用程序上的模态更大（与按钮重叠）以及名称和注销文本。提前谢谢了！你可能会说我对此很陌生！

部署的APP：本地APP：

【问题讨论】：

标签： css amazon-elastic-beanstalk bootstrap-modal plotly-dash

【解决方案1】：

这里只是一个想法，这可能是由于您的本地和生产环境中的库版本不同，例如。破折号引导组件。您可以使用浏览器的开发者工具从两个版本中获取 css 和 html 代码，并使用 diff 来查看是否有任何差异，这也可以帮助您缩小问题范围。

【讨论】：