Media Query Responsive Test
What is it?
Check if your page implements responsive design functionalities using the media query technique. The '@media' rule allows different style rules for screen sizes. Media query techniques allow different presentation and content to be served depending on the output device, helping ensure that your website renders optimally on all devices and platforms.
Pass rate:
-
Top 100 websites: 98%This value indicates the percent of top 100 most visited websites in the US that pass this test (in the past 12 months).
-
All websites: 97%This value indicates the percent of all websites analyzed in SEO Site Checkup (500,000+) in the past 12 months.
| 2021 | 99% |
|---|---|
| 2022 | 100% |
| 2023 | 98% |
| 2024 | 98% |
100
75
50
25
0
How do I fix it?
Media queries allow you to style elements for specific devices (smartphones, tablets, desktop computers) by using attributes like width, height, resolution, aspect ratio, orientation or color. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
Example:
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 960px)"
href="480-960.css" />
<!-- OR -->
@media screen and (min-width: 480px) and (max-width: 960px) {
#header {
display: none;
}
}
A @media rule specifies the target media types of a set of statements. In the example above, we are specifying the media type screen. The max-width and min-width features are telling the browser that at any screen size larger than 480px, but smaller than 960px, hide any elements with id="header".
