CanI do a range of screen sizes within my media queries?

Right now, I have the graphics I need in order to accommodate the following screen sizes:

320
480
540
640
750
960
1080
1136
1280
1334
1920

As much time and effort I've poured into this, I'm realizing now that I've got several hours of work ahead of me, because I'm still missing 600, 720, 800, 854 just for Android screen sizes.

Before I move forward, it dawned on me that perhaps the media queries that I use can be enhanced by doing some kind of range. So, rather than:

@media screen and (max-width:1920px) {
my stuff for 1920
}

I could write something like:

@media screen and (max-width:1920px and max-width:1536) {
stuff that accommodates both screen resolutions
}

Is there such a thing? Is there a more streamlined approach to accommodating 24+ different configurations of mobile and tablet screen sizes?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkCommented:
I think you have a bit of a misconception in how media queries are applied.  In your example, the rule would apply to *every* medium having a width less than or equal to 1536px.  The max-width:1920px is redundant, since the 1536px is limiting the scope even further.

You can, however, specify a true range:
@media screen and (max-width:1920px and min-width:1536px) {
/* stuff */
}

Open in new window

That rule would affect any media with a width between 1536px and 1920px, inclusive.

Here's a handy-dandy reference for targeting specific devices.  And of course, the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

One final note: don't try to target specific widths.  That will just hamper your site's responsiveness or fluidity.  Look for breakpoints at which major element shifts happen, and everything in between can be handled by normal flow.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Slick812Commented:
Greetings brucegust, , I have done some with media and max-width, min-width, and I'm trying to understand your statement - "enhanced by doing some kind of range", , , as I see it, I would never ever use your process of trying to define css measurements for many specific screen resolutions. Mostly because there are so many that you may know of, but, there are many that you can never guess, and there are new devices with different screen res coming out every quarter.  I have to use the  "media and max-width" as a "range" that changes my web page for display of the elements changing at certain "breakpoints" of width, ,  not for a device display width, BUT only according to the elements THAT NEED TO CHANGE in that specific web page. So I agree with Steve Bink saying - "don't try to target specific widths.  That will just hamper your site's responsiveness"
@media screen and (max-width: 1106px){ 
#topimage{ width: 73.81%;} 
.blusec{width:64%;min-width:580px; margin-left:2.34%;}
 }

@media screen and (max-width: 611px){ 
.blusec{width:97%;min-width:280px;}
.imgbs2{width:91%;}
.welc{display:none;}
 }

Open in new window

The above code works in ranges, all widths above 1106px, use the normal CSS, all widths between 1106px and 611px use the  "max-width: 1106px" settings and all widths below 611px use the  "max-width: 611px" settings.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.