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 , 18th December 2015 in Internet

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.

Responsive Typography

So let's have a look at how we can use this 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).

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

What this code is going to do is to set the hidden class of the base size to hidden, and also the visible classes 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.

Further Reading
Comments

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

Leave a Reply

Your email address will not be published.