MENU


@media

An important technique of responsive web design, this defines CSS Media Query rules for specific media.

Some browsers may allow the 'or' keyword to be used in place of commas, and a range to be specified with operators such as '<='.

'and' is evaluated first, followed by 'not', and lastly ','.

Below, try adjusting the height of the iframe to see the changes.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
@media  (not(color)), speech, (orientation: portrait), screen and (orientation: landscape) {
   p { font-size:10px; color: black;}
}
@media not(color), print and (orientation: portrait), screen and (max-height:100px){
   p { font-size:20px; color: blue;}
}
</style></head><body>
   <p>Am I blue?</p>
</body></html>