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