2019/12/23

よくあるシンプルなメディアクエリの書き方メモ










ざっくり、メディアクエリの書き方





360px 以上
@media screen and (min-width: 360px) {
    .test {
        margin: 10px;
    }
}





360px 以下
@media screen and (max-width: 360px) {
    .test {
        margin: 10px;
    }
}




768px から 1024px の間
@media screen and (min-width:768px) and ( max-width:1024px) {
    .test {
        margin: 10px;
    }
}