Question

是否有一种简单的方法可以减小所有material.js小部件的大小（较小的填充，较小的字体大小......）？

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

虽然小工具适用于网络应用的触摸屏，但小工具对于我的富客户端桌面应用来说太大了。 ......我不会用拇指控制，而是用鼠标指针控制。

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

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

（过去我使用的是SWT。现在我考虑转换到html＆amp; css，因为我很难用这个＆＃34;旧的＆＃34; 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-tag）进行缩放。

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

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

修改示例：

<!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的所有小部件的大小？

1 个答案: