如何在 CSS 中正确设置网格以实现移动友好视图？（Python Dash 项目）答案

【问题标题】：How to set grid in CSS correctly for mobile-friendly view? (Python Dash project)如何在 CSS 中正确设置网格以实现移动友好视图？（Python Dash 项目）
【发布时间】：2021-05-31 12:18:53
【问题描述】：

我一直在研究这个简单的仪表板，可以查看using this link。源代码is here 和问题所在的 CSS 文件is here。我使用了网格布局，不确定它是否适合这个项目，但我选择它是因为我想获得一些经验。我目前的目标是让它对移动设备友好。我使用@media only screen and (max-width: 800px) 来转换移动视图的布局。当我在我的电脑上缩小页面时它可以工作，但是当我在移动视图上测试它时它不起作用（我尝试使用不同的 max-width 值，例如 400px 或 600x 并且它不起作用。我该如何解决这个问题？

【问题讨论】：

也许可以获取一些现有的 CSS 框架，例如 Bootstrap，看看他们是如何做到的。也许问题不是@media，而是因为你没有<meta name="viewport" content="width=device-width, initial-scale=1">
我通过添加这个标签解决了这个问题。必须找出如何将此元标记添加到 python Dash。这是代码： app = dash.Dash(name, meta_tags=[{'name': 'viewport', 'content': 'width=device-width, initial-scale=1.0, maximum -scale=1.2, minimum-scale=0.5,'}] )

标签： python css dashboard plotly-dash

【解决方案1】：

对我来说，所有问题都是因为你不使用

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

如果我在Firefox 中使用Ctrl+Shift+M 测试您的页面以测试不同尺寸的页面，那么它会显示非常小的图像和字体，但如果我添加viewport，那么它看起来正确。

【讨论】：

有没有办法使用python Dash 元素添加这行代码？

【解决方案2】：

我通过将元标记添加到app = dash.Dash(__name__) 来解决它，如下所示：

app = dash.Dash(__name__,
            meta_tags=[{'name': 'viewport',
                        'content': 'width=device-width, initial-scale=1.0, maximum-scale=1.2, minimum-scale=0.5,'}]
            )

【讨论】：