モバイルファースト
小さいサイズから順に指定する。余計な大きい画面向けのスタイルを後から指定する(読み込ませない)ためモバイルサイト向け。
min-widthで設定。
＝指定した数値から適用される。
|
1 2 3 |
@media (min-width: 768px) {/*幅768px以上で適用されるスタイル*/} @media (min-width: 992px) {/*幅992px以上で適用されるスタイル*/} @media (min-width: 1200px) {/*幅1200px以上で適用されるスタイル*/} |
デスクトップファースト
大きいサイズから順に指定する。
max-widthで設定。
＝指定した数値まで適用される。
|
1 2 3 |
@media (max-width: 1199px) {/*幅1199px以下で適用されるスタイル*/} @media (max-width: 991px) {/*幅991px以下で適用されるスタイル*/} @media (max-width: 767px) {/*幅767px以下で適用されるスタイル*/} |
必ず「大きい→小さい(あるいはその逆)」の順番で書く事！