Web developers can define a media type such as screen or print, and specify the look of the content by specifying conditions such as width, height, or orientation. A media query combines a media type and a condition to specify how web content will appear on a particular receiving device.
/*-- Smartphones portrait and landscape -- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { /* Styles */ }
/*-- Smartphones (landscape) -- */
@media only screen
and (min-width : 321px) { /* Styles */ }
/*-- Smartphones (portrait) -- */
@media only screen
and (max-width : 320px) { /* Styles */ }
/*-- iPads (portrait and landscape) -- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* Styles */ }
/*-- iPads (landscape) -- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* Styles */ }
/*-- iPads (portrait) -- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* Styles */ }
/*-- Desktops and laptops -- */
@media only screen
and (min-width : 1224px) { /* Styles */ }
/*-- Large screens -- */
@media only screen
and (min-width : 1824px) { /* Styles */ }