Responsive web design test on portrait viewport 320 x 480
Media query:
@media screen and (max-width: 320px), (min-device-width: 320px) and (max-device-width: 480px) and (orientation : portrait) {
/* CSS */
}
Responsive web design test on landscape viewport 480 x 320
Media query:
@media screen and (min-width: 320px) and (max-width: 480px), (min-device-width: 320px) and
(max-device-width: 480px) and (orientation : landscape) {
/* CSS */
}
Responsive web design test on portrait viewport 320 x 568
Media query:
@media screen and (max-width: 320px), (min-device-width: 320px) and (max-device-width: 568px) and (orientation : portrait) {
/* CSS */
}
Responsive web design test on landscape viewport 568 x 320
Media query:
@media screen and (min-width: 320px) and (max-width: 568px), (min-device-width: 320px) and
(max-device-width: 568px) and (orientation : landscape) {
/* CSS */
}
Responsive web design test on portrait viewport 360 x 640
Media query:
@media screen and (max-width: 360px), (min-device-width: 360px) and (max-device-width: 640px) and (orientation : portrait) {
/* CSS */
}
Responsive web design test on landscape viewport 640 x 360
Media query:
@media screen and (min-width: 360px) and (max-width: 640px), (min-device-width: 360px) and
(max-device-width: 640px) and (orientation : landscape) {
/* CSS */
}
Responsive web design test on portrait viewport 600 x 960
Media query:
@media screen and (max-width: 600px), (min-device-width: 600px) and (max-device-width: 960px) and (orientation : portrait) {
/* CSS */
}
Responsive web design test on landscape viewport 960 x 600
Media query:
@media screen and (min-width: 600px) and (max-width: 960px), (min-device-width: 600px) and
(max-device-width: 960px) and (orientation : landscape) {
/* CSS */
}
Responsive web design test on portrait viewport 768 x 1024
Media query:
@media screen and (max-width: 768px), (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) {
/* CSS */
}
Responsive web design test on landscape viewport 1024 x 768
Media query:
@media screen and (min-width: 768px) and (max-width: 1024px), (min-device-width: 768px) and
(max-device-width: 1024px) and (orientation : landscape) {
/* CSS */
}
