Settings
Custom Media
/path/to/floncss/settings/custom-media.css
モバイルファーストなブレイクポイントを4つ定義します。
デザインに応じて適宜変更してください。
また、使用しないブレイクポイントはコメントアウトしてください。
1@custom-media --media-sm only screen and (min-width: 640px);
2
3@custom-media --media-md only screen and (min-width: 768px);
4
5@custom-media --media-lg only screen and (min-width: 1024px);
6
7@custom-media --media-xl only screen and (min-width: 1280px);Useage
utility class
utility classでは、末尾に @sm、@md、@lg、@xl を付与することで素早くレスポンシブウェブを構築することができます。
1<div class="mt@sm mr@md mb@lg ml@xl">...</div>css
1.selector {
2 @media (--media-sm) {
3 ...
4 }
5
6 @media (--media-md) {
7 ...
8 }
9}