「Css/css3」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「==media queries== 画面サイズによってcssファイルを切り替える」) |
(→media queries) |
||
行1: | 行1: | ||
==media queries== | ==media queries== | ||
画面サイズによってcssファイルを切り替える | 画面サイズによってcssファイルを切り替える | ||
+ | サンプル | ||
+ | |||
+ | 幅767px以下すべてに適用 | ||
+ | @media screen and (max-width:767px){ | ||
+ | /* bootstpra3のxs相当 */ | ||
+ | } | ||
+ | |||
+ | 幅768pxから991pxまで適用 | ||
+ | @media screen and (min-width: 768px) and (max-width: 991px) { | ||
+ | /* bootstpra3のsm相当 */ | ||
+ | } | ||
+ | |||
+ | 幅992pxから1199pxまで適用 | ||
+ | @media screen and (min-width: 992px) and (max-width: 1199px) { | ||
+ | /* bootstpra3のmd相当 */ | ||
+ | } | ||
+ | |||
+ | 幅1200px以上まで適用 | ||
+ | @media screen and (min-width: 1200px) { | ||
+ | /* bootstpra3のlg相当 */ | ||
+ | } |
2015年9月15日 (火) 17:34時点における版
media queries
画面サイズによってcssファイルを切り替える サンプル
幅767px以下すべてに適用
@media screen and (max-width:767px){ /* bootstpra3のxs相当 */ }
幅768pxから991pxまで適用
@media screen and (min-width: 768px) and (max-width: 991px) { /* bootstpra3のsm相当 */ }
幅992pxから1199pxまで適用
@media screen and (min-width: 992px) and (max-width: 1199px) { /* bootstpra3のmd相当 */ }
幅1200px以上まで適用
@media screen and (min-width: 1200px) { /* bootstpra3のlg相当 */ }