Difference between media-only and media-screen CSS queries
In order to implement responsive web design, it is important to understand media queries in CSS, especially media only and media screen queries.
Let’s begin with the obvious question.
What is a media query?
A media query is a technique that was introduced in CSS3. The query involves using the @media rule to run a block of CSS properties in the event that a predetermined condition is true.
For example, the code below dictates that if the browser window is 400px or less, the background color will be light green:
@media only screen and (max-width: 400px) {
body {
Background-color: lightgreen;
}
}
Media queries are especially helpful with adding breakpoints for responsive design. Since breakpoints are essentially pixel numbers at which content or design appears differently to the users, media queries are used to define what changes must occur at which pixels.
In the example below, the code directs that if the browser window is reduced below 600px, each column width should become 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 600px) {
/* For mobile phones: */
[class*=”col-”] {
width: 100%;
}
}
Every media query consists of an optional media type and one or more media feature expressions. It is possible to combine multiple media queries with logical operators. All media queries are case-sensitive.
Every media query is considered true when the specified media type matches the devices on which the website is displayed. Additionally, the media feature expressions must also be true.
What is the media-screen query?
The @media screen query simply means that the query in question is intended for the color screens or devices that support a “screen” mode.
Let’s take an example:
@media screen and (max-width:500px)
The above query applies to screens with a maximum width of 500 pixels. The point of this is mainly to direct the code to distinguish between ‘screen’ and other media types (such as print, braille, embossed, handheld, etc.).
What is the media-only query?
By adding the logical operator ‘only’ to the media query, the developer ensures that the query is applied only if the entire condition matches. If you do not use only, older browsers might not read or interpret all the media feature expressions. For example, if the query is
@media screen and (max-width:500px)
older browsers may interpret the query as just screen and ignore the pixel count. This would lead to the application of the query condition on all screens. To prevent this, you can use:
@media only screen and (max-width:500px)
When using the only operator, be sure to specify the media type.
Significance in responsive design
Media queries are instrumental in implementing responsive web design. The queries discussed above are two of the most commonly used ones and are helpful in ensuring that your website content is optimized for device sizes and types.
Once you have used CSS queries on your website, be sure to verify their effectiveness. The easiest way to do this is to use a tool that lets you test your website design on real devices and browsers. There are multiple tools to facilitate this, but take your time to find a responsive checker online which gives you the opportunity to test on a sufficiently wide variety of devices — both desktop and mobile.
