Media what?

A media query looks at a specific capability of a device. What is the width? What is the orientation? You can target these capabilities and style your the page accordingly. The example below changes the font size of all h1 tags on devices that fit very specific criteria.

Example 1

h1{
  font-size: 12px;
  }
  
@media screen and (max-width: 400px) and (orientation: portrait){
   h1{
     font-size: 16px;
    }
 }
 

The @media marks the start of a query. The queries in this line are screen , (max-width: 400px) and (orientation: portrait). Screen tells the browser that the styles are meant for some type of digital screen. The max-width query targets devices with a width of 400 pixels or less. The orientation is set to protrait mode. All these queries are joined with and to make a more specific query.

So, what does the CSS above do? Well firt it sets all h1 tags to have a font size of 12px. With no media queries this would apply to every device (desktop, tablet, phone, etc). This font-size looks ok on a bigger screen, but can be hard to read on a smartphone. The media query tells browsers that display on digital screens that have a with of 400px or less and are in portrait mode to increase the font from 14 to 16 pixels. This is a randmon example, but it shows the power of media queries. You can test your site on different types of devices and change the CSS for your site accordingly.

Media queries are great, but they have their limitations. They are meant to change the styles of your site not the structure. You can add or remove element. Yes, you can make them invisible or visible. But media queries don't alter html. The layout and structure of your site are also very important.

Fluid grids!

Grids systems like 960 have been very popular for the last couple of years. They do an okay job of helping designers create websites that look “good” on different devices. With RD you are not limited by grids system. 960 is based on layout of 960 pixels, hence the name. And that is where problems stem from, pixels. On one screen a pixel could be a small dot, while another it could be 10 of those dots. You need a relative system that is based on proportion. In your CSS instead of using pixels use percentages and em. This method of design require a little math and a bit of planning, but it’s worth it.

Em

To calculate em you you need a base or context. This measure will need to be in pixels. The font size of the body it the context for all body elements and it children. The grandchildren will follow this on let’s parent has a different font size from the body. The default body size for most browsers is 16 pixels, so when most of you’re calculating will be done with a context of 16. Heading tags (h1, h2, h3, etc) have there own default values; this defaults will be you context for their children. Also if you set the font-size of a element in em, the pixel value of this em will be the new context for it’s children. The actual formula for calculating em is pretty simple: target ÷ context = em . The target is the pixel measurement you want to convert. Here are some examples.

Example 2

body {
  font-size: 16px;
  }
/* Before conversion */
p{
  font-size: 12px;
  }
/* After conversion */
p{
  font-size: 0.75em; /*  12px ÷ 16px = .75 */
  } 

In example 2 we set the body font-size to 16 pixels, which is the default anyway. We want all paragraphs to the to have a font-size of 12 pixels. We want our font to be relative, so we use the em formula to calculate the relative size. It will look exactly as it did when it was assigned 12px. But with relative sizing we can change the size of all elements assigned ems by changing the size of our base (context); in example 2 this is the body. The example below extents example 2 and shows how to change the context of you ems measurements.

Example 2.1

body {
  font-size: 16px;
  }
  
h1 {
  font-size: 1.5em; /* In pixels @ this base 24px */
  }
  
p {
  font-size: 0.75em; /* In pixels @ this base 12px */
  }
  
@media screen and (max-width: 960px){
   body {
   	font-size:20px; /* Changes the context */
   	}
 }

In the example above we define our context and we define the properties of some elements based on this context. Then we used a media query to change the font-size of the body for devices with screens 960 or smaller. But we can’t see what happened to the h1 and p elements. Well, since we didn't change any of their properties they have to keep their original values. This means that in order to keep a font-size of 1.5em for the h1 and of 0.75em for the p tags you they need increase their pixel size. Their pixel measures at a base of 20px are 30px for the h1 and 15px for the p. This is an increase. So, now that you are on a smaller screen the font will automatically increase in size. We only had to change one value.

Percent

Percentages are just as easy to calculate. The formula is very similar to the em formula: target ÷ context × 100 = % . The context is a base measurement in pixels or em. This the context is not the font-size of the body, but the width of major container element. I could be the width of the body, but this variable. To give you more control I like to place most of my elements in a wrapper or container div with a fixed width. The example below should help understand percent better.

Example 3

body {
  font-size: 16px;
  }
  
div#wrapper {
  width:60em; /* In pixels @ this base 960px */
  }           /* This is the context for width of it's children */
 
#child1, #child2, #child3{
  float:left;
  width: 33.3333333333333%; 
  /* Each child will be a third of the wrapper (320px) */
  }
  
@media screen and (max-width: 960px){
   div#wrapper {
     width:100%;
     /* The wrapper now fills the width of the screen */
     }
    
   #child1, #child2, #child3{
     float:none;
     width: 100%; 
     /* Each child now take a third of the screen. */
     }
 }

In example 3 we have a wrapper that contains three children. They are display across the width of the wrapper. We have a media query targeting devices with width equal to or smaller than the width of the wrapper. On these devices the wrapper fill the screen (the width at least) and so do the children. They stack vertically. We have made our fonts and layouts transform with the device we our using. Now, lets look at how manipulate pictures and videos.

Images and other media.

In order to create images that fit on any screen, you need to make sure they scale or get cropped according to the device. I don't really like cropping images with CSS, so I tend to focus on creating scalable images.

Scaling images and videos in CSS is easy to implement. You set the media element's max-width to 100 percent, and the browser will shrink and expand the image depending the width of its container. This requires a bit of planning. The image needs to be in the supplied in the best quality and be the correct size. I suggest thet is you want you logo to be 100px wide you make it 100px wide when creating. So, when it loads on you page it will be have a witdth of 100px without you having to set it in CSS. This won't always be the case. Some time you my want to set the size of an image or video. But it's best to let the browser take care of resizing it. The example below shows the CSS to make auto-resizing images.

Example 4

img {
  max-width: 100%;
  height: auto;
  }

Conclusion

Combining media queries, fluid grids and flexible images is at the heart of responsive design, but the web is constantly evolving. Web standards and technologies are in a constant state of flux. Todays solution maybe out of date in a short while, so stay up to date. We’ve only scratched the surface of the adaptive web, so make sure you to continue your study.