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

Posted 2023-03-22

【中文标题】如何在 CSS 中正确设置网格以实现移动友好视图？ （Python Dash 项目）

【英文标题】：How to set grid in CSS correctly for mobile-friendly view? (Python Dash project)

【发布时间】：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,'] )

【参考方案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,']
            )