询问如何使我的web应用程序对移动设备友好，以及如何将在materialize中编写的表转换为卡片或其他移动设备的最佳实践

Question

我有一个网络应用程序的前端使用materializecss.com框架。它有相当多的数据表贯穿始终。我的表使用materialize中的css，我真的很喜欢它的样式。表格有5-8列，在移动设备上，你必须首先放大，然后滚动。

我不确定的是，让它对移动设备友好的最好方法是什么；我一直在寻找将表转换为卡片的代码，并找到了一些用于引导卡的代码，但没有找到用于实现的代码。我不想隐藏列。

我已经尝试了一些使用媒体查询的解决方案，比如：@media only screen and (max-width: 992px)...但我认为materialize正在覆盖它们，因为它们不起作用。我尝试将它们标记为!important，或者搜索并修改materialize css文件，但都不起作用。

创建单独的卡片元素并根据屏幕大小隐藏表格或卡片会有多糟糕？加载的主要是文本数据和链接，所以我认为这不会显着增加数据传输量。

我不是html/css/sass的专家，更不是javascript的专家，所以我非常感谢任何建议！

Answer 1

调整你的网站与屏幕大小的关系被称为responsive尝试在你的研究中寻找它。

使用materialize为您提供了定义row的选项，您可以在其中创建列并定义它们的大小。您甚至可以定义相对于屏幕大小的大小。

试着研究一下：https://materializecss.com/grid.html Materialize也有它自己的(responsive) table和collection结构，这可能对您很有帮助。

此外，在css中使用%而不是固定的px可能会很有帮助。

如果这不能解决您问题，请尝试查看flexbox和overflow。

我希望我正确理解了您的问题，否则您的一些代码将非常有用:)