box-sizingの意味は？スマホ対応に必須の理由を解説

要素のサイズに対し％指定を使う際にborder-boxを指定すると、paddingやborderのサイズを変更しても要素のサイズは変更されません。

よって要素の％指定が必須のレスポンシブ対応では、border-boxを使うことが多くなります。

パソコン・タブレット・スマホといった画面サイズの異なる端末でサイトを閲覧しても、レイアウト崩れしないようにコーディングすること。

box-sizingは全称セレクタへの指定がおすすめ
box-sizingは、以下のように全称セレクタ（*）への指定がおすすめです。

* { box-sizing: border-box; }

まとめ

box-sizingは要素のwidthとheightに、paddingとborderのサイズを含めるかどうかを指定するCSSプロパティです。
contain-box：widthとheightにpaddingとborderのサイズを含めない
border-box：widthとheightにpaddingとborderのサイズを含める
box-sizingは全称セレクタに指定して、全要素に一括で指定するのが一般的