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
Post a Comment