Everything about CSS media queries

Introduction to Media Queries:

Media queries allow your website or apps to change according to device characteristics. Today it is very common in the user community to access any websites using laptops/desktops/mobiles etc. (devices of different sizes). Therefore, it is very important that each website is accessible on small/large/different device sizes. Also, search engines rank/prioritize highly responsive websites. Search engines downgrade websites that are not responsive. CSS media queries are very useful for developing responsive websites.

As shown in the above figure, we use different stylings for different devices as per their pixels.

• When the width of the screen is between 375px to 768px, the CSS set3 styling will be applied.
• When the width of the screen is between 768px to 1024px, the CSS set2 styling will be applied.
• When the width of the screen is above 1024px, the CSS set1 styling will be applied.
• Lastly, for all other cases (i.e screen size less than 375px) in that case, the common styling will be applied.

Syntax to write Media Query:

@media <media-query-list> {
  <stylesheet>
}

@media is used to define the rules (called “at-rules”). They’re special instructions for the browser in controlling how styles are applied.

Media-query-list consists of two-parts
(i) Media Type
(ii) Media Feature

These both, Media Type and Media Feature are combined with the “and” clause or with “,”.

There are 4 types of possible Media Types
(i) screen → Referring to the user interface
(ii) print → Referring when a user enters print preview mode
(iii) all → Default. Used for all media-type devices
(iv) speech → used for screenreaders that “reads” the page out loud

There are 35 different media features. You can find the complete list over here https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Basic Requirements to make Media Queries work:

1. Always add Meta ViewPort
   What is this viewport: A viewport is the most possible visible area of a web page and since devices like mobile phones or tablets have different sizes of screen then the viewport of each device is also different and when there is no viewport defined then the browser tries to fit the whole web page of a desktop inside a smaller device and ultimately the media queries doesn’t work.

So to fix this we need to add one single to the head of our main HTML file

<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />

2. Always write Media Queries at the end of CSS

At first, all the CSS queries will run and at the end, depending on the device the styling is applied by overriding the global CSS styles. Hence, if the Media Queries are written at the beginning then for different devices the Media Queries will not work.

Examples of commonly used Media Queries:

Example 1:-

@media screen (min-width: 320px) and (max-width: 768px) {
  .element{ /*Style*/ }
}

Explanation:
Apply style to a particular element when the width of the screen is between 320px and 768px.

Example 2:-

@media screen (prefers-color-scheme: dark), (min-width 1200px) {
  .element{ /*Style*/ }
}

Explanation:
Apply style to a particular element when a user using dark mode or have a screen width of more than 1200px.

Example 3:-

@media (orientation: landscape) {
   .element{ /*Style*/ }
}

Explanation:
Apply style to a particular element when the user changes orientation to landscape mode. You can also use orientation as portrait mode.

Example 4:-

@media screen and (min-aspect-ratio: 16/9) {
  .element{ /*Style*/ }
}

Explanation
The ratio of the width to the height of an image or screen is called the aspect ratio.
So, when the aspect ratio becomes greater than 16/9 then style is applied to the element.

Example 5:-

@media all and (display-mode: fullscreen) {
  .element{ /*Style*/ }
}

Explanation
Apply style to the element when the device completely goes into fullscreen mode. The other possible display mode can be found here https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode

Device Breakpoints

CSS breakpoints are the points added in the code, the website content responds to these points depending on the device screen size. This helps in displaying an ideal layout to the end user. CSS breakpoints are used along with media query which is also known as CSS media query breakpoints.

Reference by George Moller

Common Media Query breakpoints:

Bootstrap breakpoints:

Tailwind breakpoints:

Wrapping Up

Now you have a good understanding of what media queries are, why they are useful, and how you can use them to make your website more appealing to visitors on mobile devices.
Also, CSS media queries are not the be-all-end-all of making your site responsive. There are also other ways to have your design adapt, such as the aforementioned flexbox and grid.

I hope you’ve learned at least a couple of things from this article, thank you for reading till the end!

Connect with me, for more such stuff: https://linktr.ee/prituldave