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

回答

相關問題