IMPORTANT PLEASE READ!
Website development and design blog, tutorials and inspiration

Using CSS3 Media Queries for Responsive Design

How to create responsive web designs using CSS3 media queries

By , Written on in Internet

Using CSS3 Media Queries for Responsive Design

1,664 words, estimated reading time 8 minutes.

CSS3 introduced media queries into the web development world. Media queries are the foundation for responsive design. They let you create layouts specific for screen sizes such as tablets and smartphones. This article provides you with a brief overview of media queries with the basic syntax for common screen sizes.

I've talked a lot about why responsive web design is important and shared some top tips for creating responsive designs, but so far I haven't really shown how to use these new media queries to create a responsive design, so let me take this opportunity to show you how you can create a responsive design in these simple steps.

For this tutorial, I'm going to start off with the Responsive Mobile First CSS Skeleton I created for this website. This code works in all major browsers, and the breakpoints cover the most popular screen sizes.

The most importing thing to remember is to design for mobile first, then work up to desktop sizes. This allows the mobile content to be delivered first and optimised for mobile. Larger devices will have more resources and be able to handle larger content so they can load them in when needed. A good example is photography - a mobile device may struggle loading in an image 2000x2000 pixels, so we use a smaller size, say 800x800. That is the base size. Now, as screen size increases, we can load up larger images, overriding the previous breakpoint settings. This is good for typography as well, we can use small fonts on small screens, and larger fonts on larger screens, keeping proportions correct.

So let's have a look at the base CSS and the breakpoints. I've added in a selector for the body:after, this will allow us to easily see which breakpoint we are looking at when testing, however, this should be removed prior to transferring to a live production system.

  1. /* Common base styles for all devices */
  2. body:after { content: 'Size: Mobile below 480px';background:yellow;padding:0.25em}
  3.  
  4. @media only screen and (min-width: 480px) {
  5. /* Styles for wide mobiles (480px) and above */
  6. body:after { content: 'Size: Wide mobile 480px and up'; }
  7. }
  8.  
  9. @media only screen and (min-width: 768px) {
  10. /* Styles for tablets/netbooks (768px) and up */
  11. body:after { content: 'Size: Tablets 768px and up'; }
  12. }
  13.  
  14. @media only screen and (min-width: 1024px) {
  15. /* Styles for large screens (desktops 1024px) and above */
  16. body:after { content: 'Size: Desktop 1024 and up'; }
  17. }

From this, we can see the common styles for all sizes at the top. This section will contain the vast majority of your styles, but only for mobile devices. You can set all your font stacks, typography, margins, padding and borders etc here. The first section of the CSS targets screens less than 479 pixels wide. Typically this will be mobile phones in portrait orientation.

Each of the breakpoints defines a "best guess" for device sizes. The next section covers screen sizes between 480 and 767 pixels. Typically this will be mobile phones in landscape orientation.

The next section covers 768 to 1023 pixels and will most commonly be tablets, high-end mobiles, or phablets.

The final section covers everything above 1024 pixels, so that would be laptops, desktops and maybe some high-end tablets.

In Bootstrap, these sections are called base (or sometimes XS), SM, MD, LG. You can create CSS selectors to target specific rules for each screen size. We'll have a look at these later on in the article.

Responsive Typography

Let's first have a look at how we can use these breakpoints to create responsive typography. It's a lot easier than you think!

The first thing we are going to do is set the base font size. To do this we are going to set a fixed font size on the body, then the other elements will use a value relative to this using the EM units.

  1. /* Common base styles for all devices */
  2. body {
  3. font-size: 14px;
  4. line-height: 1.57em;
  5. font-family: georgia
  6. }
  7.  
  8. body:after {
  9. content: 'Size: Mobile below 480px';
  10. background: yellow;
  11. padding: 0.25em
  12. }
  13.  
  14. h1 {
  15. font-size: 2em
  16. }
  17.  
  18. h2 {
  19. font-size: 1.5em
  20. }
  21.  
  22. h3 {
  23. font-size: 1.25em
  24. }
  25.  
  26. h4, p {
  27. font-size: 1em
  28. }
  29.  
  30. @media only screen and (min-width: 480px) {
  31. /* Styles for wide mobiles (480px) and above */
  32. body:after {
  33. content: 'Size: Wide mobile 480px and up';
  34. }
  35. }
  36.  
  37. @media only screen and (min-width: 768px) {
  38. /* Styles for tablets/netbooks (768px) and up */
  39. body {
  40. font-size: 16px
  41. }
  42. body:after {
  43. content: 'Size: Tablets 768px and up';
  44. }
  45. }
  46.  
  47. @media only screen and (min-width: 1024px) {
  48. /* Styles for large screens (desktops 1024px) and above */
  49. body {
  50. font-size: 20px
  51. }
  52. body:after {
  53. content: 'Size: Desktop 1024 and up';
  54. }
  55. }

From here you can see in the common block we set the base body font size to 14px, all the other sizes are measured in EM's. 1 em is equal to the base font size, 2em is equal to double the font size, and you can use any value in between. To change the font-size across all the screen sizes, making the text larger and easier to read on larger screens is simply a matter of increasing the base font size.

Responsive Images

There are a number of ways of doing responsive images, but I've found that the most effective is to set the max-width to 100% and the height to auto. This allows the image to scale nicely at smaller sizes.

  1. .img-responsive {
  2. max-width:100%;
  3. height:auto;
  4. }

This rule does not need to be overridden in the larger screen sizes, but it is still handy to include.

Showing Content or Hiding Content

Sometimes it is a requirement that certain content should not be shown on mobile, or visible only on mobile. In this case, we can again use media queries. This code example is based on the Bootstrap framework, simplified for this demonstration.

We can use a set of classes to hide elements, we'll call this hidden-X, where X is going to be the screen size. We can also use a set of classes called visible-X where X is again the screen size.

The principle is that the hidden classes can be applied to classes which should be hidden at the specified size and below, while the visible classes work the other way around. In bootstrap, the sizes are defined as XS (our base), SM (wide mobile), MD (tablet), and LG (desktop). These are the class conventions that are used in Bootstrap and have become an unoffical standard.

  1. .hidden-xs, .visible-sm, .visible-md, .visible-lg {visibility:hidden;display:none}

This code is going to set the hidden class of the base size to hidden, and also the visible classes for larger sizes all to hidden. That means that anything tagged with the visible-md class will not be shown until the screen size is a tablet or larger.

We can add other classes at each of the breakpoints so that elements can become visible or made hidden.

  1. /* Common base styles for all devices */
  2. .hidden-xs,
  3. .visible-sm,
  4. .visible-md,
  5. .visible-lg {
  6. visibility: hidden;
  7. display: none
  8. }
  9.  
  10. @media only screen and (min-width: 480px) {
  11. /* Styles for wide mobiles (480px) and above */
  12. .hidden-sm {
  13. visibility: hidden;
  14. display: none
  15. }
  16. .visible-sm {
  17. visibility: visible;
  18. display: block
  19. }
  20. }
  21.  
  22. @media only screen and (min-width: 768px) {
  23. /* Styles for tablets/netbooks (768px) and up */
  24. .hidden-md {
  25. visibility: hidden;
  26. display: none
  27. }
  28. .visible-md {
  29. visibility: visible;
  30. display: block
  31. }
  32. }
  33.  
  34. @media only screen and (min-width: 1024px) {
  35. /* Styles for large screens (desktops 1024px) and above */
  36. .hidden-lg {
  37. visibility: hidden;
  38. display: none
  39. }
  40. .visible-lg {
  41. visibility: visible;
  42. display: block
  43. }
  44. }

Within the media query sections, you can add any valid CSS rules and selectors as you normally would, at the end of the day the sky is the limit as to what you can do.

You can see a working example of these media queries on my CodePen demo page below.

Responsive Grid Layout

Responsive grid layouts are usually based on a 12 column layout and have multiple tiers, one for each media query range. Bootstrap, for example, defines a series of column classes which are used inside containers and rows and allow layouts to change based on screen resolution. Each column class defines a certain width percentage and the break point at which it is applied. Below this break point, either a smaller size is applied or if none, the default of 100% is used. Column classes use the same XS, SM, MD, LG notation as the visible and hidden classes above.

The 12 column grid defines column names with these rules - col (indicating column), MD (size) and the number of columns to span. For example, col-md-4 is a column, at the medium size will be 33% available width. Below medium size, it will be 100% width. The number in a row must add up to 12 and you can have any combinations.

Within the media query sections, you can add any valid CSS rules and selectors as you normally would, at the end of the day the sky is the limit as to what you can do.

col-XX-1col-XX-1col-XX-1col-XX-1col-XX-1col-XX-1col-XX-1col-XX-1col-XX-1col-XX-1col-XX-1col-XX-1
col-XX-4col-XX-4col-XX-4
col-XX-4col-XX-8
col-XX-6col-XX-6
col-XX-12

You can also specify that a column has different widths at different screen sizes. For example, you could have class="col-sm-6 col-md-4 col-lg-3" which would make the element 100% width below small size, at small size it will be half width (12 / 2 = 6), at medium size it will be 33% width (12 / 3 = 4) and at large size it will be 25% in width (12 / 4 = 3).

Using these column classes you can create web page layouts which adapt to the available screen size. Typically websites have a two or three column layout - a left sidebar, the content column and a right sidebar. On mobile devices, the sidebars are less important than the content, so moving them underneath the content frees up space for the content. Using a responsive layout you can bring the content to the top of the page, and the two sidebars will be shown underneath the content.

  1. <div class="container">
  2. <div class="row">
  3. <div class="col-sm-3 col-md-2"><!--Column one--></div>
  4. <div class="col-sm-9 col-md-8"><!--Column two--></div>
  5. <div class="col-sm-12 col-md-2"><!--Column three--></div>
  6. </div>
  7. </div>

You can see how this works in the example below. Resize the window and notice how the columns rearrange as the window gets smaller or larger.

See the Pen BdqrOq by Tim Trott (@timtrott) on CodePen.

Last updated on: Tuesday 29th August 2017

Did you Like this Post? Why not Like us on Facebook?

 

Further Reading
Comments

There are no comments for this post. Be the first!

Leave a Reply

Your email address will not be published.