What are the various breakpoints for a Responsive Web Design?

4 replies
  • WEB DESIGN
  • |
What are the various breakpoints for a Responsive Web Design? I mean what device widths shall I keep in mind while I am writing the media Query CSS?

Any measurements chart for that?

Let me know if my question is not clear to you?

Thank you
#breakpoints #design #responsive #web
  • Profile picture of the author andrewjorgenson
    Well, personally I'd recommend working with Twitter bootstrap as it's extremely flexible and has responsive design built in(it's free too): Bootstrap

    Here are some useful break points

    Standard Mobile Resolution: 320Ã--480
    iPhone 3 and 4: 640Ã--960
    iPhone 5: 640Ã--1136

    Also, as always: Wikipedia is your best friend
    Comparison of tablet computers - Wikipedia, the free encyclopedia -- Tablet Computer Resolutions
    {{ DiscussionBoard.errors[8435862].message }}
  • Profile picture of the author dsouravs
    Thank you Andrew.
    I will look in Bootstrap later as it is totally new to me.

    Right now I am doing custom coding
    Signature

    I can convert your Non-Responsive website to Responsive website ... How sweet is that? :)

    {{ DiscussionBoard.errors[8435898].message }}
  • Profile picture of the author Andrew H
    Thank you Andrew.
    I will look in Bootstrap later as it is totally new to me.

    Right now I am doing custom coding
    Good for you that your custom coding. However, seeing that twitter bootstrap is a popular and thoroughly tested framework you should check out what device widths they are optimized for (ie: check the media queries in the css files)
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[8436110].message }}
  • Profile picture of the author Will Compton
    The default breakpoints for portrait-handheld is 320px and portrait-tablet is 768px. I just resize my screen until the design breaks, then I drop in a breakpoint. But I use the Gumby2 framework.
    {{ DiscussionBoard.errors[8436272].message }}

Trending Topics