bootstrapのブレークポイントを削減する方法
作成日:
2018年12月21日
📝 はじめに
本記事はBootstrapのCSS容量削減についての一考です。
bootstrapのグリッドは
Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px |
|
---|---|---|---|---|---|
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
のようにブレークポイントが設定されています。
しかし、これも画面いっぱいに表示する管理画面のダッシュボードやWebアプリで無ければここまで細かく設定する必要も無いと思います。
そこで、これもbootstrapの_variables.scssの配列を調整して数を減らすことで、全体の容量を削減することが出来ます。
今回はxlを削除して、mdとlgに幅を持たせています。
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程度 削減出来ました。
2,376 円~ 2023年12月6日 5:48 AM時点のAmazon.co.jp 価格 価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点でAmazon.co.jpに表示されている価格および発送可能時期の情報が適用されます。
CSSをより便利に、効率的に書ける「Sass(サス)」の解説書を、最新のコーディング環境にあわせて大幅刷新!Sassは導入が面倒そう。はじめたいけどあと一歩が踏み出せない。CSSを今よりも効率的に書きたい。こうした方がSassを導入するきっかけとなり、ひと通りSassの機能を使いこなせるようになるのが本書の目標です。CSSをHTMLの構造に合わせて入れ子で書いていく「ネスト」や、便利な「変数」や「演算」などのSassの基本機能はもちろん、筆者が実際に仕事の現場で使っている実践的なテクニックまで、この一冊で網羅しています。
amazonでチェック
本サイト上で表示されるコンテンツの一部は、アマゾンジャパン合同会社またはその関連会社により提供されたものです。これらのコンテンツは「現状有姿」で提供されており、随時変更または削除される場合があります。

物草 灸太郎
WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。
関連投稿
Loading...
コメントをどうぞ