Question: Is there any particular CSS technique to use for making a website responsive on most of the screen sizes? Big mobile, small mobile, tablet, desktop etc.

Is there any specific breaking points to use? any particular approach to fit all screen sizes?

Answer: 
I'd recommend you to think 'mobile-first' when it comes to catering for responsiveness.

This means that by default, you will be showing for small screens and then, say from tablets onwards, you set a breaking point.

This can be done like the following:

```
// default CSS here - for extra small screens. (mobiles).
p {
    font-size: 24px;
}

// for  small screen with minimum width of 768px (tablet)
@media only screen and (min-width: 768px) {
  //CSS for tablets here
    p {
        font-size: 19px
    }
}

// for medium screen with a minimum width of 992px width (laptops)
@media only screen and (min-width: 992px) {
  //CSS for for laptops / small screen desktops column
    p {
        font-size: 16px
    }
}

// for large screen with a minimum width of 1200px width (wide desktop)
@media only screen and (min-width: 1200px) {
  //CSS for large desktops screen
}

```

With the above CSS, any device with a width lower than 768px will be considered as mobile regardless of its exact screen width.
if you havent already add this viewport tag `<meta name="viewport" content="width=device-width, initial-scale=1.0">`

then set the css to set the width and height of elements to percentages at a certain breakpoint