Major Junco.css breakpoints

Determining primary breakpoints in my CSS.

Top-down or bottom-up?

Today's thinking is mobile-up (min-width), but I've seen designers use the desktop-down approach (max-width).

Mobile-up is suppose to create simpler and easier to maintain CSS, but for some reason, desktop-down makes more sense to me.

And px or em? I've been using px in the media queries, but I've used em in many other places in the CSS, and em is suppose to work better in media queries with different zoom levels.

  1. first, will try mobile-up with em.
  2. may create .css version with desktop-down and px.

breakpoints

  • 320 px
  • 480 px
  • 768 px
  • 1024 px

30Sep2013 update: At the moment, I'm primarily using desktop-down setup.

  • min-width: 76.5em (1224px)
  • max-width: 75em (1200px)
  • max-width: 37.5em (600px)

Additional media queries exists for small, specific items, such as the search text input field in the nav bar, the textarea boxes for microblog and blog posts, and the boxes for the top tags list.

#junco
#css
#design

From JR's : articles
161 words - 1002 chars
created on
updated on - #
source - versions

Related articles
Mar 23, 2015 links - Mar 23, 2015
CSS for opening paragraph of text - Sep 26, 2013
Breaking the web in 2014 - 2016 - May 31, 2016
Interesting and related Treehouse online classes - May 08, 2013
Simple CSS text formatting test - May 15, 2015
more >>



A     A     A     A     A

© 2013-2017 JotHut - Online notebook

current date: Mar 28, 2024 - 5:31 p.m. EDT