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.
- first, will try mobile-up with em.
- 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.
From JR's : articles
161 words - 1002 chars
created on
updated on
- #
source
- versions
Related articles
Parallax Web Design - Dec 20, 2013
Patternlab.io - design reusable components - Dec 08, 2014
Twitter Bootstrap - Dec 19, 2013
Test no-list navigation with drop-down menus - Aug 08, 2013
Creating a simple theme for an article page - Feb 03, 2014
more >>