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

【问题标题】：How to decrease size of all widgets of materialize.js?如何减小 materialize.js 的所有小部件的大小？
【发布时间】：2017-08-05 14:57:01
【问题描述】：

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

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

虽然小部件在 Web 应用程序的触摸屏上会很好，但对于我的“富客户端桌面应用程序”来说，小部件太大了......我不是用拇指控制而是用鼠标指针控制。

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

我可以应用某种全局 CSS 缩放因子吗？
或者是否有针对桌面应用程序的主题或物化分支？

（过去我使用 SWT。现在我考虑切换到 html 和 css，因为我在使用“旧”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>

【问题讨论】：

标签： javascript css desktop-application materialize javafx-webengine

【解决方案1】：

许多具体化 css 大小都以 rem 为单位指定。该单位随根元素的字体大小（html-tag）缩放。

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

小部件内的字体现在太小了......但是为 body 元素设置更大的字体大小（例如 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>

【讨论】：