Media Queries (max-width , min-width) responsive Desiging

Hi, How ru guys.why we need to give max and min width both in media queries. I use only max-width and it works fine for me.
Is there any specific reason for using the max-width and min-width at same time.
Do i need to use both when i define media query for responsive Desiging .


No you don’t need to use both at the same time (unless you want to) as in most cases simply starting with max-width only and working smaller will be fine (or for mobile first using min-width and working larger). Note that in each media query you just modify rules as required but of course the rule will be applied throughout that range so sometimes you may want a rule to only apply to a certain range and then you can use min and max-widths together.

There’s a short article here that may help.

I, too, prefer to keep things simple and let the page layout change depending on the simple width of the viewport (I have less trouble if I start at 320px and work up). I think it depends on the situation and characteristics of the site when tested in various devices.

On the last two sites I coded, I found I had the most trouble with tablets in portrait, so I had to find a set of media queries that would address that particular situation. I used this (device-width rather than width) on one of them with a distinct, hard-to-place background image:

@media (min-device-width:768px) and (max-device-width: 1024px) and (orientation:portrait) { }.

Here’s the article I’m using as a good reference lately,

I used to chase devices but these days I prefer to avoid device widths altogether while also avoiding fixed widths and instead code a fluid/elastic design that uses breakpoints based on the design and not on the device. In this way you don’t need to worry about device width (or portrait or landscape ) as you simply code for the design and adjust the design as required at points where the design needs to change. In that way you can collect all devices on the way automatically.:slight_smile:

I find that fixed width designs often end up being a series of fixed width’s that chase common device widths but end up not really doing the job efficiently for all. There are just too many devices to keep happy so best to cater for all of them with a fluid design-centric approach.