[CSS] 様々なデバイス 幅からメディアクエリを設定する

{
    /* スマートフォン (縦) */
}
@media screen and (min-width: 500px) {
    /* スマートフォン (横) */
}
@media screen and (min-width: 768px) {
    /* タブレット */
}
@media screen and (min-width: 1024px) {
    /* PC. */
}
@media screen and (min-width: 1200px) {
    /* PC large. */
}

{
    /* デスクトップPC */
}
@media screen and (max-width: 1199px) {
    /* PC */
}
@media screen and (max-width: 1023px) {
    /* タブレット */
}
@media screen and (max-width: 767px) {
    /* スマホ (横) */
}
@media screen and (max-width: 499px) {
    /* スマートフォン (縦) */
}