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

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

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

尽管小部件在网络应用程序的触摸屏上可以正常工作，但这些小部件对于我的“富客户端桌面应用程序”来说太大了...我无法用拇指控制鼠标指针。

我不想手动修改每个小部件的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>

来源

2017-08-05 Stefan

许多Materialise的CSS尺寸都在单位ř指定em。该单位与根元素（html-tag）的字体大小一致。

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

小部件内部的字体现在会太小......但为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>

来源

2017-08-05 18:09:46 Stefan

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

回答

相关问题