media querys
@media all { /* all media type devices */ }
@media aural { /* speech and sound synthesizers */ }
@media braille { /* braille tactile feedback devices */ }
@media embossed { /* paged braille printers */ }
@media handheld { /* small or handheld devices */ }
@media print { /* printers */ }
@media projection { /* projected presentations, like slides */ }
@media screen { /* computer screens */ }
@media tty { /* fixed-pitch character grid, like teletypes and terminals */ }
@media tv { /* television-type devices */ }
@media all and (max-width: 900px) { /* */ }
@media only screen
and (max-width : 320px) { /* smartphone */ }
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* landscape*/ }
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* portrait */ }
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) { /* retina display */ }