Media Queries min-width VS max-width for responsive website [closed]

Question

Since long time im using the below media queries to make responsive websites

// Large devices (desktops, less than 1200px)
 @media (max-width: 1199px) { ... }

 // Medium devices (tablets, less than 992px)
 @media (max-width: 991px) { ... }

 // Small devices (landscape phones, less than 768px)
 @media (max-width: 767px) { ... }

 // Extra small devices (portrait phones, less than 576px)
 @media (max-width: 575px) { ... }

but when i checked bootsrap 4 , i notes they are using the below queries

/* Small. Above 34em (544px) */
 @media screen and (min-width: 34em) { ... }

 /* Medium. Above 48em (768px) */
 @media screen and (min-width: 48em) { ... }

 /* Large. Above 62em (992px) */
 @media screen and (min-width: 62em) { ... }

 /* Extra large. Above 75em (1200px) */
 @media screen and (min-width: 75em) { ... }

im wondering should i continue on my way or its better to follow bootsrap way , and why they deside to start from small device to larg device?

Thank you

Answer 1

In its current form, your question is primarily opinion based.
It would have probably been better to ask if anyone knows what the reasons behind Bootstrap's approach might have been, although that question is, too, primarily opinion based. But your true chances of getting it answered are much higher here than trying to contact Bootstrap's authors.
And that's why I'll give you my own reasoning, coming from a hands-on approach: I need to get stuff done, it has to be fast and it has to be production ready.

---

As far as the order of @media queries goes, the only argument for using mobile-first over desktop-first is it sounds better for people who have no clue what it means. So you can always reply to your clients/boss, when they ask:

— Is it "mobile-first"?
— Of course, we use the latest technology...

But, in the real world, as long as your @media queries apply correct code to each responsiveness interval, you're doing-it-right.

The only things you should worry about are, in this order, where possible:

• writing valid code
• writing cross-device/cross-browser code
• writing maintainable and easily readable code (for you and other devs)
• writing less code for same functionality.

---

With regard to using em vs px, this is the second attempt by Bootstrap to dump px for em in @media queries. To my knowledge, the first attempt was dumped due to lack of support and differences in em calculation on a significant share of mobile browsers, at the time. However, a citation is needed here and I'm unable to find anything about that discussion which I remember reading ~2 years ago. I'm not even sure if it was around v3 or the v4 prototype, which was being released at the time. I think it was v4, though.
Anyway, if they decided to use em in v4, em is probably safe to use now.
Edit: Looking closer into v4 beta — released just 9 days ago, it looks like what you quoted is from the scss file, later parsed into px queries into the final dist code. So I am assuming the discussion I remember reading is still valid today. In conclusion, I would advise against using em in your CSS @media queries.

---

Last, but not least, the screen part should only be considered when you need to take care of how your page looks printed vs how it looks on screen.

If you do need to take care of this, depending on the differences between the two, you have to assess the amount of code you would override if all your existing (screen) code applied to print vs writing all print code from scratch.

If first is faster, don't add screen to your queries and place the @media print overrides last.
If the latter is faster, wrap existing code inside @media screen, add screen to your existing queries, as Bootstrap does, and place your print code inside another @media print, so it doesn't affect screen.

Note: I prefer the first method, as it is a hands-on approach, easily testable and it usually results in less code being written.