Table of Contents

• Horizontal Responsive Width
• Vertical Responsive Height

Horizontal Responsive Width

@media only screen and (max-width: 360px) {
    body {background-color: red;}
}
@media only screen and (max-width: 480px) {
    body {background-color: blue;}
}
@media only screen and (max-width: 768px) {
    body {background-color: crimson;}
}
body {background-color: yellow;}
@media only screen and (max-width: 992px) {
}
@media only screen and (min-width: 1200px) {
    body {background-color: lime;}
}

Vertical Responsive Height

@media (min-width: 480px) and (min-height: 720px) {
    body{background-color: red;}
}
@media (min-width: 992px) and (min-height: 720px) {
    body{background-color: yellow;}
}
@media (min-width: 992px) and (min-height: 1080px) {
    body{background-color: orchid;}
}
@media (min-width: 1440px) and (min-height: 720px) {
    body{background-color: crimson;}
}
@media (min-width: 1440px) and (min-height: 1080px) {
    body{background-color: black;}
}
@media (min-width: 1920px) and (min-height: 720px) {
    body{background-color: blue;}
}
@media (min-width: 1920px) and (min-height: 1080px) {
    body{background-color: lime;}
}