如何减小 materialize.js 的所有小部件的大小？

Question

有没有一种简单的方法可以减小所有 material.js 小部件的大小（更小的填充、更小的字体大小……）？

我想将 materialize.js 用于桌面应用程序（在 JavaFx WebView 中）。

虽然这些小部件在 Web 应用程序的触摸屏上会很好，但这些小部件对于我的 "rich client desktop app" 来说太大了......我不能用拇指控制，而是用鼠标指针控制。

我不想手动修改每个小部件的 css 属性，我尝试调整缩放级别，但这只会影响字体大小。

是否可以应用某种全局 css 比例因子？
或者是否有针对桌面应用程序的主题或 materialize 分支？

(过去我使用 SWT。现在我考虑切换到 html 和 css，因为我在使用 "old" SWT 技术时遇到了一些困难，尤其是其严格的布局.)

可折叠小部件示例：

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"  media="screen,projection">
</head>
<body>
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

<ul class="collapsible" data-collapsible="expandable">
    <li>
      <div class="collapsible-header">header</div>
      <div class="collapsible-body">body</div>
    </li>

  </ul>


</body>
</html>

Answer 1

许多实体化 css 大小在单位 rem 中指定。该单位与根元素（html-标签）的字体大小成比例。

=> 为根目录选择较小的字体大小（例如 3 px）会减小小部件的大小。

小部件内的字体现在会太小...但是为正文元素设置更大的字体大小（例如 12 像素）会产生想要的结果。（我还调整了字体系列以更好地适应我的桌面应用程序使用的字体。）

修改示例：

<!DOCTYPE html> <html style="font-size:3px;font-family: 'Segoe UI', Consolas, monospace;"> <head> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" media="screen,projection"> </head> <body style="font-size:12px;"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script> <ul class="collapsible" data-collapsible="expandable"> <li> <div class="collapsible-header">header</div> <div class="collapsible-body">body</div> </li> </ul> </body> </html>

如何减小 materialize.js 的所有小部件的大小？

How to decrease size of all widgets of materialize.js?

javascript

css

desktop-application

materialize

javafx-webengine