bootstrapのブレークポイントを削減する方法

作成日:

Notice: Trying to access array offset on value of type bool in /home/c8622571/public_html/monoxa.net/wp-content/themes/site/inc/mx-shortcodes.php on line 168
📝 はじめに 本記事はBootstrapのCSS容量削減についての一考です。

bootstrapのグリッドは

 Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container widthNone (auto)540px720px960px1140px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-

のようにブレークポイントが設定されています。

しかし、これも画面いっぱいに表示する管理画面のダッシュボードやWebアプリで無ければここまで細かく設定する必要も無いと思います。

Bootstrapで作成された管理画面事例
Bootstrapで作成された管理画面事例

そこで、これもbootstrapの_variables.scssの配列を調整して数を減らすことで、全体の容量を削減することが出来ます。

今回はxlを削除して、mdlgに幅を持たせています。

SASS _variables.scss
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 992px,
  lg: 1300px,
) !default;

$container-max-widths: (
  sm: 540px,
  md: 960px,
  lg: 1280px,
) !default;

これで新たに 10kb程度 削減出来ました。

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。