In CSS, the @media rule allows for the definition of different style rules for different media in the same stylesheet.
This means that a set of style rules can be created within a stylesheet that will only be used if the @media rule is true. Historically, the only parameter that would be used with the @media rule would be the media type so that the same webpage markup could be used differently for print media type versus screen or tv media types.
In CSS3, the @media rule is extended to incorporate a set of queries that can be added to the @media rule so that within the same media type, different rules can be used depending on specific aspects of the media displaying the webpage – like the screen width and height, aspect ratio of the media type – in our case screen.
Twitter Bootstrap uses a set of basic @media queries to define different style rules for different viewport or browser widths. This set of @media queries looks something like this:
/* Extra small devices (smartphones, less than 768px) */ /* No media query since this is the default in */
... style rules for all screen sizes ...
/* Small devices (tablets, 768px and up) */ @media ( min-width : 768px ) { ... style rules for screens larger than 768px ... }
/* Small devices (desktops, 992px and up) */ @media ( min-width : 992px ) { ... style rules for screens larger than 992px ... }
/* Small devices (large desktops, 1200px and up) */ @media ( min-width : 1200px ) { ... style rules for screens larger than 1200px ... } |
This set of queries produces a cumulative set of style rules that builds as the screen size grows. This means that style properties defined within the @media ( min-width : 768px ) query would apply to screens larger than 768 pixels wide, larger than 992 pixels wide and larger than 1,200 pixels wide, but not to screens 767 pixels wide or less.
