[Mobile Web] target / context = result --> px to ems

MOBILE WEB DEMO

 

Set the body font-size using relative sizing so that 1em = 10px. Remember, the default font-size for a browser is 16px.

body {
font-size: 62.5%; /*10/16*/
}

 

SET HEADING FONT SIZE

 

Using ems, set the h1 to be the equivalent of 24px. Remember, the target divided by context rule, keeping in mind our context is the body font-size set in pixels.

h1 {
  font-size: 2.4em;  /*1em = 10px*/
}

 

SET HEADING EMPHASIS FONT SIZE

 

Using ems, set the a element inside the h1 element to be 16px. Remember, the target divided by context rule, keeping in mind our context has changed. Use the CSS Source tab below for additional help. Specify your answer to at least 6 decimals.

h1 a {
  font-size: 0.6666667em;  /* h1 is 24px, therefore a is 16/24 */
}

 

VIEW YOUR CHANGES

 

Set the <h1> to a font-size, in ems, of 70px, with the context being 16px. Also, set the <h3> font-size to 40px, in ems with the same context. Be sure to view theRendered tab to see the site you'll be building in future levels. Use the toolbar buttons and border handles to resize the site.

h1 {
  font-size: 4.375em; 
}
h3 {
  font-size: 2.5em;
}