search

thinkingboxmedia / static-web-starter-kit

MIT License
5 stars 4 forks source link

Added media queries (using postcss-custom-media) for responsive breakpoints. #12

Closed codyhart closed 7 years ago

codyhart commented 7 years ago

Five pre-defined breakpoints:

  1. < 768px = screen-xs a.k.a. Mobile
  2. 768px - 991px = screen-sm a.k.a. Tablet
  3. 992px - 1199px = screen-md a.k.a. Small Desktop
  4. 1200px - 1599px = screen-lg a.k.a. Medium Desktop
  5. 1600px < = screen-xl a.k.a. Large Desktop

An example of usage can be found in the LoginButton.css file.

jmsaulnier commented 7 years ago

@codyhart looks like it's better to use "em" for media-queries

https://zellwk.com/blog/media-query-units/

codyhart commented 7 years ago

I'm content with leaving it at pixels and throwing Safari to the wolves if you are. ðŸ¤