loading...
Cover image for TIL - Responsive Units in CSS & Media Queries

TIL - Responsive Units in CSS & Media Queries

annequinkenstein profile image Anne Quinkenstein Updated on ・1 min read

CSS: Units for responsive Webdesign

Unit Description
em Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
ex x-height of the element's font.
ch The advance measure (width) of the glyph "0" of the element's font.
rem Font size of the root element.
lh Line height of the element.
vw 1% of the viewport's width.
vh 1% of the viewport's height.
vmin 1% of the viewport's smaller dimension.
vmax 1% of the viewport's larger dimension.

calc() to mix them

when to use which?
A rule of thumb is if the margins or paddings are related to that element, they should be ems. If they’re global sizes they should be rems.

Media Queries

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  //CSS

}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  //CSS

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

  //CSS

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

  //CSS

}
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide