css - Media Queries min-width VS max-width for responsive website -


since long time im using below media queries make responsive websites

// large devices (desktops, less 1200px)  @media (max-width: 1199px) { ... }   // medium devices (tablets, less 992px)  @media (max-width: 991px) { ... }   // small devices (landscape phones, less 768px)  @media (max-width: 767px) { ... }   // small devices (portrait phones, less 576px)  @media (max-width: 575px) { ... } 

but when checked bootsrap 4 , notes using below queries

/* small. above 34em (544px) */  @media screen , (min-width: 34em) { ... }   /* medium. above 48em (768px) */  @media screen , (min-width: 48em) { ... }   /* large. above 62em (992px) */  @media screen , (min-width: 62em) { ... }   /* large. above 75em (1200px) */  @media screen , (min-width: 75em) { ... } 

im wondering should continue on way or better follow bootsrap way , , why deside start small device larg device?

thank you

in current form, question opinion based.
have been better ask if knows reasons behind bootstrap's approach might have been, although question is, too, opinion based. true chances of getting answered higher here trying contact bootstrap's authors.
, that's why i'll give my own reasoning, coming hands-on approach: need stuff done, has fast , has production ready.


as far order of @media queries goes, argument using mobile-first on desktop-first it sounds better people have no clue means. can reply clients/boss, when ask:

— "mobile-first"?
— of course, use latest technology...

but, in real world, long @media queries apply correct code each responsiveness interval, you're doing-it-right.

the things should worry are, in order, possible:

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

with regard using em vs px, second attempt bootstrap dump px em in @media queries. knowledge, first attempt dumped due lack of support , differences in em calculation on significant share of mobile browsers, @ time. however, citation needed here , i'm unable find discussion remember reading ~2 years ago. i'm not sure if around v3 or v4 prototype, being released @ time. think v4, though.
anyway, if decided use em in v4, em safe use now.
edit: looking closer v4 beta — released 9 days ago, looks quoted scss file, later parsed px queries final dist code. assuming discussion remember reading still valid today. in conclusion, advise against using em in css @media queries.


last, not least, screen part should considered when need take care of how page looks printed vs how looks on screen.

if need take care of this, depending on differences between two, have assess amount of code override if existing (screen) code applied print vs writing print code scratch.

if first faster, don't add screen queries , place @media print overrides last.
if latter faster, wrap existing code inside @media screen, add screen existing queries, bootstrap does, , place print code inside @media print, doesn't affect screen.

note: prefer first method, hands-on approach, testable , results in less code being written.


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -