facebook twitter hatena line email

「Css/css3」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「==media queries== 画面サイズによってcssファイルを切り替える」)
 
 
(同じ利用者による、間の1版が非表示)
行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相当 */
}