メディアクエリの書き方(モバイルファースト)

ブレイクポイントが1つ

/* 768px以上のとき */
@media screen and (min-width:768px) { 
}

ブレイクポイントが2つ

/* 768px以上1024px以下のとき */
@media screen and (min-width:768px) and ( max-width:1024px) {
}

/* 1024px以上のとき */
@media screen and (min-width:1024px) {
}

印刷をPCビューで行いたいとき

@media print, screen and (min-width: 768px){
}

〇〇px以上〇〇px以下、の書き方がいつもわからなくなるのでメモ

コメント