What is Media Query and How to use it?

Jun 10, 2017

hardik

WEB

0

A Media Query consists of an optional media type (all, handheld, print, TV and so on) and any number of optional expressions that limit when the query will trigger, such as width, pixel-density or orientation. Media queries are part of CSS3, and enable developers to customize their content for different presentations of their content.

We can use Media queries to port our website for different resolutions. Media query is very useful tool when website are viewed on a huge range of devices. With very little change, you can make an existing website mobile and tablet compliant. For this purpose, the most commonly used query is max-width. At any width that is less than the max-width specified, all of the CSS within the query will take effect.

We can add specific CSS for small screens or large screens (inside our cascading stylesheets). By putting our CSS media queries in the bottom of our stylesheets, we can simply overwrite any styles rules we have declared earlier in our CSS.

 

Media Query Parts

A media query consists of 3 Parts: the Media Type, an Expression, and the Style Rules contained within the media query itself.

  1. TheMedia Type(example: screen) allows us to declare what type of of media the rules should be applied to. There are four options you can declare: all, print, screen, and speech.
  2. Expressions (example: (min-width: 800px) allow you to further target devices based on specific conditions you pass to the media query. Expressions test media features, which describe different features of a device, such as width and height.
  3. CSS Style Rules can be be listed inside the media query’s curly braces.

 

Media Query Rule Example

 

How min and max width queries work

How media queries function can be a bit confusing. Let’s take a look at the queries.

Max-Width

Here is an example of a max-width query.

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.

 

Min-Width

Here is an example of a min-width query.

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.

 

Combining Min-Width and Max-Width

These queries can be used together to target a specific range of screen sizes.

The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.

 

Breakpoints

Most media queries are set to trigger at certain screen widths or breakpoints. Exactly what these should be set to is a matter of some debate amongst email developers.

iPhones and iPads provide us with a few easy breakpoints to start from. Coding styles for these specific clients will make sure our emails look great on these screens. Androids, on the other hand, vary widely in screen size because there are so many different manufacturers and devices. I recommend creating two to four breakpoints, based on popular Apple devices, which will cover most devices.

  • Breakpoint 1 (iPhone 5S): 320px
  • Breakpoint 2 (iPhone 6+): 414px
  • Breakpoint 3 (iPad Mini): 703px
  • Breakpoint 4 (iPad Air): 768px

Breakpoints 3 and 4 are optional, as most emails will look fine showing the desktop version on an iPad or large tablet. You could even get away with using just breakpoint 2, if you code your container tables to expand to 100% width (and not a set width, which may or may not match the device well).

Here is an example order.

  • Desktop styles (not in a media query)
  • Tablet Styles (max-width: 768px)
  • Mobile Styles (max-width: 414px)

 

Coding for media queries

When coding an email to be responsive using media queries, a common technique is to create tables with align = “left” and a special class to target inside the media queries. For example, a two-column section might look like this.

Each of the tables with 49% width can fit side by side when on “desktop” view. 49% is used instead of 50% because Outlook can be very picky about what fits side-by-side and what doesn’t. You can make 50% width fit if you set all of your styles just right (no border, padding, etc). You can make a 3 Column section using similar code, but use three tables set to 32% width instead.

When the responsive code kicks in, we’ll want to make these content blocks 100% width for phones, so that they fill the whole screen. This can be accomplished for most phones with a single media query.

You can continue to add media queries with special styles to cover as many different screen sizes as you’d like. You should also add code to your media queries to optimize font-size and line-height for each screen size, improving readability for your recipients.

Post by hardik

Leave a Reply

Your email address will not be published. Required fields are marked *