responsive design - Correct way of using @media query -
i want change height
of banner on different screen sizes, using below snippet.
/* large devices, wide screens */ @media screen , (min-width : 1366px) { } /* medium devices, desktops */ @media screen , (min-width : 992px) { } /* small devices, tablets */ @media screen , (min-width : 768px) { } /* small devices, phones */ @media screen , (min-width : 480px) { } /* custom, iphone retina */ @media screen , (min-width : 320px) { }
but code creating problems, when change height
of banner change bigger screens also.
now, googled , found different answers , viewpoints of people regarding media query snippet. below working me, fixed size , have seen people not using fixed ranges using max
or min
size only.
@media screen , (min-device-width : 340px) , (max-device-width : 355px) {}
i want know correct , future-proof way of working media queries.?
refer below link , find media queries devices. that's correct way well.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Comments
Post a Comment