What breakpoints are needed?

Question

css

Hello.
Now I've reached the last point in responsive design, namely media queries, and there are a couple of questions about this.
1. How is it correct to determine these same breakpoints for media queries? You need to change the browser window (as a quick option) and at every moment where something has moved, run over, broken - do a breakpoint and edit it in media queries? Or are there some generally accepted breakpoints according to which everything is adjusted ( 1280 px or let's say 768 px ) and it doesn't matter what will be a pixel less? If there is, what are they?
2. In the media queries themselves, you need to use px or further % + em (after all, the milestone was adaptive and the entire site was written in % and em ) or does it not matter in media queries?

Answer 1

1) read this and everything will be clear media queries , media queries2
2) doesn't matter

Answer 2

I use these (I googled it once)

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}

/* Iphone 5 */
@media (max-width: 320px) {

}