如何减小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>
答
许多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>