Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.
Hi all, please see this major site announcement: https://www.boards.ie/discussion/2058427594/boards-ie-2026

Breakpoints Viewports

  • 01-09-2018 12:20PM
    #1
    Registered Users, Registered Users 2 Posts: 8,512 ✭✭✭


    How many Breakpoints/Viewports would a Web Developer use when creating a responsive website from scratch, and, what are the most common sizes used?

    "Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid."



Comments

  • Registered Users, Registered Users 2 Posts: 7,208 ✭✭✭Talisman


    It depends on the project. I would use Bootstrap breakpoints as a starting guideline and then adapt to the project content for smooth transitions.

    The Standard Bootstrap 3.x Breakpoints
    @media all and (max-width: 991px) { ... }
    @media all and (max-width: 768px) { ... }
    @media all and (max-width: 480px) { ... }
    

    The Standard Bootstrap 4.x Breakpoints
    @media all and (max-width: 1199px) { ... } 
    @media all and (max-width: 991px) { ... } 
    @media all and (max-width: 768px) { ... } 
    @media all and (max-width: 575px) { ... }
    


  • Registered Users, Registered Users 2 Posts: 8,512 ✭✭✭Gadgetman496


    So would the 3 x Breakpoints cover Desktop, Tablet & Mobile.

    Whereas the 4 x Breakpoints would cover Desktop, Laptop, Tablet & Mobile, or, is that the basic idea at all?

    "Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid."



  • Registered Users, Registered Users 2 Posts: 7,208 ✭✭✭Talisman


    You need a minimum of 3 breakpoints -  one for each type of device (mobile, tablet, and desktop).

    If you know the market for which the site is being developed you can use publicised data to help you decide what breakpoints to target.

    Screen Resolution Stats Ireland

    Once you have the website live you can use analytics to track the devices visiting it and alter your breakpoints to improve the experience for the most common screen sizes. How deep into the rabbit hole you wish to go is entirely up to you.


  • Registered Users, Registered Users 2 Posts: 8,512 ✭✭✭Gadgetman496


    That's a handy link, cheers Talisman ;)

    "Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid."



Advertisement