How to use Media Queries for Responsive Design

A guide to creating pages that display correctly on a range of viewing devices Media Queries have long been considered a bit of dark art by a large number of web developers, but since the appearance of CSS3, they have actually been relatively simple to implement.

Media Queries check devices that are attempting to view your content for certain features which will determine the way the content must be viewed, and implement this accordingly. Tablet, desktop, or phone – your website has to be viewable on each.

A notebook is likely to have different viewing and interaction requirements to a tablet PC. Here’s a short summary of how to use Media Queries to make your website easily accessible to all.

The first rule for usage media Queries is to include a block of CSS properties only if a certain condition is true. For instance, If the browser window is 600px or smaller, the background color will be lightblue:

Source

Many websites do a lot of pages with rows and columns for different questionnaires and so on. However, they wouldn`t look great on small screens. And on the other hand, if you create a website for mobile devices with a certain height and width of the screen, then it will look terrible on desktops or tablets.

To avoid such a problem, you need a Media Query that will help you change the design to the best one for the given screen size. This approach means that it doesn’t matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as breakpoints. You could also add as many breakpoints as you like.

Breakpoint Media Querie
Source

Design for mobile first

What is mobile-first? This is the development of a site or page, first for the screens of mobile devices, and only then for computers and other electronic devices. This method will speed up the display of pages on devices with a small screen. To do this, you need to make some changes to your CSS.

mobile first design
Source

Two sets` obviousness of identical classes gives us the opportunity in HTML to decide what will happen with the columns at each breakpoint:

HTML Media Queries
Source

There are thousands of electronic devices with different heights and widths. Of course, it is hard to create an exact breakpoint for each device. So, you could just target five groups:

Media Querie five groups
Source

With help of Media Query, you could hide some elements on different devices. So you just need to write the size of the screen where chosen elements should be hidden. 

Hiden Elements Media Querie
Source

By following these steps, you can add progressively complex Media Queries to your website. And make sure that your design is fluid and responsive on all platforms.

07 Nov 2011

2011 Graphic Designer Survey – Win Macbook Pro

UPDATE: The winner for the 2011 Graphic Designer Survey has been announced,…

25 Jul 2013

Free Masonry WordPress Themes. Build Your Seamless Wall of Pictures

If we paraphrase a proverb well-known since childhood, it would sound like…

Written by

Allison Reed

Allison is a professional SEO specialist and an inspired author. Marketing manager by day and a writer by night, she is creating many articles on business, marketing, design, and web development. Follow her on LinkedIn and Facebook.

Post Comment

Your email address will not be published.