DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS Media Queries
Tabassum Khanum
Tabassum Khanum

Posted on

CSS Media Queries

What are media queries?

Responsive Design is the practice of making sure your content looks good on all screen sizes. Everything on the website including layouts, fonts and images should automatically adapt to the user's device.

Media queries can modify the appearance (and even behaviour) or a website or app based on a matched set of conditions about the user’s device, browser or system settings.

media-query1

The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify.Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport.

Understanding the syntax

syntax

syntax2

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}
Enter fullscreen mode Exit fullscreen mode
  • @media - tells the type of media that a site is viewed with, what features that media type supports, and operators that can be combined to mix and match simple and complex conditions alike.
  • Media Type - tells the browser what kind of media this code is for (e.g. print,or screen).

  • Operator - Media queries support logical operators like many programming languages so that we can match media types based on certain conditions.

and

/* Matches screen between 320px AND 768px */
@media screen (min-width: 320px) and (max-width: 768px) {
  .element {
    /* Styles! */
  }
}
Enter fullscreen mode Exit fullscreen mode

or (or comma-separated)

/* 
  Matches screens where either the user prefers dark mode or the screen is at least 1200px wide */
@media screen (prefers-color-scheme: dark), (min-width 1200px) {
  .element {
    /* Styles! */
  }
}
Enter fullscreen mode Exit fullscreen mode

not

@media print and ( not(color) ) {
  body {
    background-color: none;
  }
}
Enter fullscreen mode Exit fullscreen mode
  • media Feature/expression - A media expression, which is a rule, or test that must be passed for the contained CSS to be applied.

Live preview of a website

layout

fullscreen

mediumscreen

smallscreen

Portfolio Code here

Breakpoints for Devices

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 due to which it is also known as CSS media query breakpoints.

breakpoints

b-2

Read - How to use CSS breakpoints to create responsive designs

Min-Max width

The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width β€” or an exact width β€” using the min-width, max-width, and width media features.

min

@media only screen and (min-width: 600px) 
 {...}
Enter fullscreen mode Exit fullscreen mode

What this query really means, is β€œIf [device width] is greater than or equal to 600px, then do {…}”

So if the email is opened on an iPhone 5S with a screen width of 320px, the media query will not trigger and the styles contained in { … } will not take effect.

max

@media only screen and (max-width: 600px)  
{...}
Enter fullscreen mode Exit fullscreen mode

What this query really means, is β€œIf [device width] is less than or equal to 600px, then do {…}”

So if the email is opened on an iPhone 5S with a screen width of 320px, the media query will trigger and all of the styles contained in { … } will take effect.

Essential media features

width and height

These two are very commonly used media features and are an essential part of responsive web.

/* Exact width */
@media (width: 360px) {
  body {
    ...
  }
}

/* Maximum width */
@media (max-width: 768px) { 
  body {
   ...
}

/* Minimum width */
@media (min-width: 992px) { 
  body {
    ...
  }
}

/* Exact height */
@media (height: 360px) {
  body {
    ...
  }
}

/* Minimum height */
@media (min-height: 640px) {
  body {
    ...
  }
}

/* Maximum height */
@media (max-height: 768px) {
  body {
    ...
  }
}

/* All the values can also be in rem, em, vw, vh */
Enter fullscreen mode Exit fullscreen mode

Orientation
There are two orientation values-

  • portrait: The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.

  • landscape: The viewport is in a landscape orientation, i.e., the width is greater than the height.


@media (orientation: landscape) {
    /* landscape styles */
}

@media (orientation: portrait) {
    /* portrait styles */
}
Enter fullscreen mode Exit fullscreen mode

This media feature helps in responsive design. We can use it with other media features such as width and height.

@media screen and (min-height: 640px) and (orientation: portrait) { 
    ...
}
Enter fullscreen mode Exit fullscreen mode

display-mode

Applies styles based on the display mode of an application.
Available modes are: fullscreen, standalone, minimal-ui and browser.

@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}
Enter fullscreen mode Exit fullscreen mode

Wrappinng 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 in this article,thank you for reading till the end!
For daily web development threads, updates and content follow me on Twitter.
Happy Coding🌼

Top comments (0)

Image description

Join the One Year Club

You can earn this badge by being a registered member of the DEV Community for at least one year. Create an account and get started today.