如何正确设置 CSS 中的网格以实现适合移动设备的视图？ （Python 达世币项目）
How to set grid in CSS correctly for mobile-friendly view? (Python Dash project)
我一直在研究这个可以查看的简单仪表板 using this link. The source code is here and the CSS file which is where the problem lies is here。我使用了网格布局，不确定它是否适合这个项目，但我选择它是因为我想获得一些经验。我目前的目标是让它移动友好。我使用 @media only screen and (max-width: 800px) 来转换移动视图的布局。当我在我的电脑上缩小页面时它有效但是当我在移动视图上测试它时它不起作用（我尝试使用不同的 max-width 值例如 400px 或 600x 但它不起作用。我如何修复那？
对我来说所有的问题都是因为你不使用
<meta name="viewport" content="width=device-width, initial-scale=1">
如果我在 Firefox 中使用 Ctrl+Shift+M 测试您的页面以测试不同大小的页面，那么它会显示非常小的图像和字体，但如果我添加 viewport 则它看起来正确。
我通过向 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,'}]
)
我一直在研究这个可以查看的简单仪表板 using this link. The source code is here and the CSS file which is where the problem lies is here。我使用了网格布局，不确定它是否适合这个项目，但我选择它是因为我想获得一些经验。我目前的目标是让它移动友好。我使用 @media only screen and (max-width: 800px) 来转换移动视图的布局。当我在我的电脑上缩小页面时它有效但是当我在移动视图上测试它时它不起作用（我尝试使用不同的 max-width 值例如 400px 或 600x 但它不起作用。我如何修复那？
对我来说所有的问题都是因为你不使用
<meta name="viewport" content="width=device-width, initial-scale=1">
如果我在 Firefox 中使用 Ctrl+Shift+M 测试您的页面以测试不同大小的页面，那么它会显示非常小的图像和字体，但如果我添加 viewport 则它看起来正确。
我通过向 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,'}]
)