It turns out that doing that is actually hostile to your users.
You really only want two things: set the width to the device your site is shown on, and make sure the initial scale is 1, which means that 1 pixel in your CSS equals one device-independent pixel, like this: You develop websites on a large laptop or desktop screen, and usually your client is most interested in the desktop design of a website, so it might feel natural to just start with the design for the desktop site and then work your way down.
Back when the viewport meta tag was first introduced, common knowledge was you had to add in all sorts of values to prevent users from resizing and to have a minimum and maximum screen size.
If you build mobile-first, this means that, as you add styling for larger and larger media queries, you're CSS for just to undo your more advanced desktop styling.
So you're writing more CSS and if you're not carefully undoing all CSS, you end up with things like horizontal overflowing or text not fitting.
Stephen Hay, who wrote the book on responsive design workflows, advices you to start with your small screen, then "expand until it looks like shit. "This focus on the content will force you to think of websites as inherently fluid.
You can't design only your pixel perfect widths, because . With specific device widths no longer mattering, you should also switch out those breakpoint widths in pixels, to widths in ems.A great way to (re-)learn how to build common layouts with Flexbox and CSS Grid is