matchMedia queries

Can someone explain how you match multiple queries. I'm looking at it but it's not sinking in today.
I understand this
if (matchMedia) {
	var mq = window.matchMedia("(min-width: 500px)");
	mq.addListener(WidthChange);
	WidthChange(mq);
}

function WidthChange(mq) {
	if (mq.matches) {
		// window width is at least 500px
	}
	else {
		// window width is less than 500px
	}
}

Open in new window


...but if I want to match on multiple widths and perform actions how do I write the query?
How can I say if match 500 or 600 etc.
I assume this only fires the once and isn't continually checking the width?
LVL 58
GaryAsked:
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.

Kyle HamiltonData ScientistCommented:
what you're asking isn't really clear.

a media query will match both 500 and 600 if you use max-width: 600, or min-width: 500

what exactly are you trying to match?

You could do this, but it's redundant:
<script>
		if (matchMedia) {
			var mq1 = window.matchMedia("(min-width: 500px)");
			var mq2 = window.matchMedia("(min-width: 600px)");

			mq1.addListener(WidthChange);
			WidthChange(mq1);

			mq2.addListener(WidthChange);
			WidthChange(mq2);

		}

		function WidthChange(mq) {
			if (mq1.matches && mq2.matches) {
				console.log("window width is at least 500px and at least 600px") 
			}
			else if (mq1.matches || mq2.matches) {
				console.log("window width is either less than 500px or less than 600px");
				// 
			}
		}
	</script>

Open in new window

0
GaryAuthor Commented:
That's kind of what I am doing. I thought that might be some way to incorporate a number of queries kind of like
window.matchMedia("(min-width: 500px)"||"(min-width: 600px)");

 and then in the function do whatever depending on which query fired.
0
Kyle HamiltonData ScientistCommented:
You can put your conditional logic in the query:

var mq3 = window.matchMedia("(min-width: 500px) and (color)");
if(mq3.matches){// executes if min-width is 500 and has color}

Open in new window

I guess any valid media query can be used. ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries?redirectlocale=en-US&redirectslug=CSS%2FMedia_queries

but the following would be weird, I can't see any application for it:

var mq4 = window.matchMedia("(min-width: 500px) and (min-width: 600px)");
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

GaryAuthor Commented:
Actually I looked through your code again and think that's what I am trying to do - will have a play with it.
0
Kyle HamiltonData ScientistCommented:
just to clarify, I don't think there is an OR operator in media queries.
0
GaryAuthor Commented:
I know, that was just an example of what I meant
0
GaryAuthor Commented:
Why did you say your code is redundant?
0
Kyle HamiltonData ScientistCommented:
because it seems redundant to check for 'either' min-width:500, or min-width:600, when min-width:500 alone will match both conditions.

so this:
var mq1 = window.matchMedia("(min-width: 500px)");
var mq2 = window.matchMedia("(min-width: 600px)");
...
if (mq1.matches || mq2.matches){...}

Open in new window

is the same as this:
var mq1 = window.matchMedia("(min-width: 500px)");
...
if (mq1.matches){...}

Open in new window


but that is concerning oneself with widths only. it wouldn't be redundant if you were checking widths and/or other properties (ie. orientation)

so this isn't neccessarily redundant:
var mq1 = window.matchMedia("(min-width: 500px)");
var mq2 = window.matchMedia("orientation: landscape");
...
if (mq1.matches && mq2.matches){...}

Open in new window


but could be rewritten as:

var mq1 = window.matchMedia("(min-width: 500px), orientation: landscape");
...
if (mq1.matches){...}

Open in new window

but:
var mq1 = window.matchMedia("(min-width: 500px)");
var mq2 = window.matchMedia("orientation: landscape");
...
if (mq1.matches || mq2.matches){...}

Open in new window


isn't necessarily the same as putting the conditional in the query.

so it really depends what you intend to use it for, how many comparisons you'll be making... etc..

(pardon my syntax errors, tired...)
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
Kyle HamiltonData ScientistCommented:
(just in case you already looked at my last post.. I made some edits)

Ultimately what I'm trying to say, is... how you implement your logic, really depends on what you are trying to achieve.. on a sort of more abstract level so to speak.
0
GaryAuthor Commented:
Thanks
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
JavaScript

From novice to tech pro — start learning today.