use rem instead of em for examples

MoOx · MoOx · commit 94fc518c044b · 2014-11-11T09:38:48.000+01:00
Not safe to use em since if you don't have any explicit font-size defined, it just do nothing. Here was a example where using em didn't work ```html <style> @import "../node_modules/cssrecipes-custom-media-queries/index.css"; @import "../node_modules/cssrecipes-grid/index.css"; @import "../node_modules/cssrecipes-utils/lib/all.css"; @import "../node_modules/cssrecipes-utils/lib/max.css"; .r-Grid { width: 50em; } </style> <body> <div class="r-Grid"> <h1 class="r-Grid-cell"> Hi there </h1> </div> ``` .r-Grid have width == 0 :( (confirmed on firefox & chrome)
diff --git a/README.md b/README.md
@@ -67,13 +67,13 @@ First of all, you can override all these custom properties according to your nee
 
 @media (--r-minM) {
   .r-Grid {
-    width: 30em;
+    width: 30rem;
   }
 }
 
 @media (--r-minL) {
   .r-Grid {
-    width: 50em;
+    width: 50rem;
   }
 }
 
@@ -113,13 +113,13 @@ First of all, you can override all these custom properties according to your nee
 
 @media (--r-maxL) {
   .r-Grid {
-    width: 50em;
+    width: 50rem;
   }
 }
 
 @media (--r-maxM) {
   .r-Grid {
-    width: 30em;
+    width: 30rem;
   }
 }
 
@@ -152,7 +152,7 @@ First of all, you can override all these custom properties according to your nee
 
 ```css
 .r-Grid {
-  width: 50em;
+  width: 50rem;
 }
 ```
 

Original file line number	Diff line number	Diff line change
`@@ -67,13 +67,13 @@ First of all, you can override all these custom properties according to your nee`
`67`	`67`
`68`	`68`	`@media (--r-minM) {`
`69`	`69`	`.r-Grid {`
`70`		`- width: 30em;`
	`70`	`+ width: 30rem;`
`71`	`71`	`}`
`72`	`72`	`}`
`73`	`73`
`74`	`74`	`@media (--r-minL) {`
`75`	`75`	`.r-Grid {`
`76`		`- width: 50em;`
	`76`	`+ width: 50rem;`
`77`	`77`	`}`
`78`	`78`	`}`
`79`	`79`
`@@ -113,13 +113,13 @@ First of all, you can override all these custom properties according to your nee`
`113`	`113`
`114`	`114`	`@media (--r-maxL) {`
`115`	`115`	`.r-Grid {`
`116`		`- width: 50em;`
	`116`	`+ width: 50rem;`
`117`	`117`	`}`
`118`	`118`	`}`
`119`	`119`
`120`	`120`	`@media (--r-maxM) {`
`121`	`121`	`.r-Grid {`
`122`		`- width: 30em;`
	`122`	`+ width: 30rem;`
`123`	`123`	`}`
`124`	`124`	`}`
`125`	`125`
`@@ -152,7 +152,7 @@ First of all, you can override all these custom properties according to your nee`
`152`	`152`
`153`	`153`	```css
`154`	`154`	`.r-Grid {`
`155`		`- width: 50em;`
	`155`	`+ width: 50rem;`
`156`	`156`	`}`
`157`	`157`	```
`158`	`158`