materialize.jsのすべてのウィジェットのサイズを減らすにはどうすればいいですか？

すべてのmaterial.jsウィジェットのサイズを小さくする簡単な方法はありますか（小さいパディング、小さいフォントサイズなど）？materialize.jsのすべてのウィジェットのサイズを減らすにはどうすればいいですか？

デスクトップアプリケーション（JavaFx WebView内）にmaterialize.jsを使用したいと思います。

ウェブアプリケーションの場合、ウィジェットはタッチスクリーン上で問題ありませんが、私の親指で操作するのではなく、マウスポインタで操作する "リッチクライアントデスクトップアプリケーション"のウィジェットは大きすぎます。

個々のウィジェットのCSSプロパティを手動で変更する必要はなく、ズームレベルを調整しようとしましたが、フォントサイズにのみ影響します。

適用できるグローバルなCSSスケーリングファクタはありますか？
デスクトップアプリケーションをターゲットとするテーマまたはフォークが存在しますか？

（過去には、私は今、私は特にその剛性のレイアウトで、その「古い」SWTの技術といくつかのハードの時間があったので& CSSをHTMLに切り替えることを検討してください。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

マテリアCSSのサイズの多くは、単位Rで指定されていますem。そのユニットは、ルート要素のフォントサイズ（html-tag）で縮尺されています。

=>ルート（たとえば3ピクセル）のフォントサイズを小さくすると、ウィジェットのサイズが小さくなります。

ウィジェット内のフォントが小さすぎるようになりましたが、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のすべてのウィジェットのサイズを減らすにはどうすればいいですか？

答えて

関連する問題