In HTML, you can conditionalize CSS styles by media:
<link rel="stylesheet" type="text/css" media="screen" href="site.css"/> <link rel="stylesheet" type="text/css" media="print" href="print.css"/>
The browser:
The list of media
tokens is a controlled vocabulary.
A group of CSS rules can be wrapped outside of HTML:
@media screen { color: green; background-color: black; } @media print { color: black; background-color: white; }
@media only screen and (min-width: 250px) { body { background-color: red; } } @media only screen and (min-width: 500px) { body { background-color: green; } } @media only screen and (min-width: 800px) { body { background-color: blue; } }
@media only screen and (orientation: portrait) { body { background-color: green; } } @media only screen and (orientation: landscape) { body { background-color: red; } }
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: portrait), only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) { // your style here! }
Media Queries - W3C Recommendation 19 June 2012
CSS Media Queries Testing Site (among many ...)