Confused About REM and EM

REM can be confusing, specially without a solid understanding of its partner EM and their archvillain, the PX.

Relativer Units

Both rem and em are relative units, px is not. Before considering rem, its important to understand the relationship between em, markup and inheritance.

Save lives with EM

Well, maybe not lives, but it will save lines ... if code. The following examples do the same thing; update font sizes are padding within a media query. The initial values are calculated by incrementing 1em( 16px ) at a 1:1.2 ratio. You can choose different ration/scale and calculate your own values on TYPE SCALE.

EM Scale by updating our value Or recalulate every PX value

html{ font-size: 1em; } = html{ font-size: 16px; }

h1{ font-size: 2.074em; } = h1{ font-size: 33px; }

h2{ font-size: 1.728em; } = h2{ font-size: 28px; }

h3{ font-size: 1.44em; } = h3{ font-size: 23px; }

h4{ font-size: 1.2em; } = h4{ font-size: 19px; }

Conclusion

I use em for nearly everything, rem ocasionally for padding or margins, but only in a piinch, and px some times for borders.

Media Queries for Standard Devices

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Media Queries, Sass 3.2

Media query is like steroids for web designers or web developers

Media queries are already awesome. Media query in Sass are already awesome. Media queries in Sass 3.2 are going to be really awesome

.column{
  width: 33.33%;
    @media ( max-width: 600px ){
      width: 100%;
   }
}

In css

.column{
   width: 33.33%;
}
@media (max-width: 600px){
   .width{
      width: 100%;
   }
}