css - Media Queries conflict using max-device-width and max-width -


i trying understand if there's conflict between using max-device-width specify elements website responsive on devices , using max-width desktops. i've heard forums using device-width in stylesheets gives different layout on devices?

will there conflicts in sense of being overwritten?

this have far:

/* desktops , laptops ----------- */ @media screen , (max-width : 1824px) {...}  /* ipads (landscape) ----------- */ @media screen , (max-width : 1224px) {...}  /* ipads (portrait) ----------- */ @media screen , (max-width : 1024px) {...}  /* smartphones (landscape) ----------- */ @media screen , (max-width : 768px) {...}  /* big smartphones (portrait)*/ @media screen , (max-width : 640px) {...}  /* big smartphones (portrait)*/ @media screen , (max-width : 480px) {...}  /* smartphones (portrait) */ @media screen , (max-width : 321px) {...}   /* iphone 4 ----------- */ @media screen , (-webkit-min-device-pixel-ratio : 1.5), screen , (min-device-pixel-ratio : 1.5) { /* style goes here */ }   /* smartphones (portrait) */ @media screen , (max-device-width : 768px) {...} 

max-device-width refers device's actual screen width

max-width refers viewport width.

they ever conflict 1 when viewport width variable.

so if use max-width , resize browser window narrow width ie reduce viewport width - mobile rules kick in.


Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -