Does it work with multiple MQs in 1 stylesheet?

[ghost]

Hi,

Sorry if my question is very obvious, but I read the readme over 10 times and still can't get it (and the script throws a JS error).
I've used it before with media queries for each stylesheet, today I try to use with media queries all in one main stylesheet... Does this work?

Thanks in advance for your help..

[arielsalminen]

It does work with multiple media queries in one css file.

[ghost]

Any idea what I'm doing wrong then?
On Apr 29, 2012 8:42 AM, "Viljami Salminen" <
reply@reply.github.com>
wrote:

It does work with multiple media queries in one css file.

---

Reply to this email directly or view it on GitHub:
#123 (comment)

[zachleat]

You'll have to post more about your environment (OS, Browser, version) and include a test case that reproduces the issue.

[BMCouto]

I have the same issue, IE7-8 using ajax to call different pages. Im doing the respond update, but still doesn't do a thing on IE. Any clue?

[synthview]

multiple media queries in one css file does not work. It’s written in the doc. But it would be great it does.

[scottjehl]

hmm. That's not quite true. Respond.js is designed to translate inline media queries as described. I'll have to take a look at the CSS source to see what the conflict is. Did you validate the CSS? stray brackets can trip up the parser. also, if you have any "@media" within comments, that'll cause problems too.

On Sep 7, 2012, at 4:14 PM, synthview wrote:

multiple media queries in one css file does not work. It’s written in the doc. But it would be great it does.

—
Reply to this email directly or view it on GitHub.

[synthview]

Oh really?
I've tried in many ways but it always kills the script.
My code is like that:

#logo a{
background:url(../images/mois-photo-off-logo-s@2.png) no-repeat 20px 12px;
background-size: 210px 12px;
}

.photoList li{
background: url(../images/bkg-ruler-list@2.png) repeat-x center bottom;
background-size:278px 11px;
}

.listHeader .fastNav{
background: url(../images/headerArrows@2.png) no-repeat center center;
background-size:23px 46px;
}

#downloadDocs{
background:url('../images/bkg-grayDot@2.png') 1px 0;
background-size:2px 2px;
}

#espacePresseForm #grayBkg{
background-size:1px 1px;
}

#tri{
background-image:url("../images/bkg-bigRuler@2.png");
background-size:2px 5px;

}

.listHeader{
background-image: url('../images/bkg-arrowRuler@2.png'), url('../images/bkg-bigRuler@2.png');
background-size:11px 6px, 2px 5px;
}

.bigRuler, .headerRuler{
background-image: url('../images/bkg-arrowRuler@2.png'), url('../images/bkg-bigRuler@2.png');
background-size:11px 6px, 2px 5px;
}

#rebondsParcours .headerRuler{
background-image: url('../images/bkg-arrowRuler-gris@2.png'), url('../images/bkg-bigRuler@2.png');
background-size:11px 6px, 2px 5px;
}

#festivalPage #ou{
background-image:url(../images/ou@2.gif);
background-size:39px 78px;

}

@media all and (min-width: 900px){
nav li a{
background: url('../images/nav-items@2.gif') no-repeat;
background-size:1113px 87px;
}

}

edit : If I keep the @media, the bigger image is displayed on IE7 and IE8 (and it shouldn’t)

When I used the same system for standard queries (non retina) IE 8 and 7 shown the 1st stylesheet only.
I've used your script as present in the 320 boilerplate http://stuffandnonsense.co.uk/projects/320andup/, but testing their site, your script does not work too (?) and it shows always the mobile css

I've sent you an email with the url of the website using your script

[synthview]

I'm sorry. trying again today the @media inside a css works. It was maybe something with js cascade or some latencies of the server.
An I presume the issue I have with the imgs for bigger retina screens is that Respond.js do not understands (min-device-pixel-ratio: 1.5) and activates the styles for older IE too. Am I right?
Thanks

[synthview]

GOT IT!
In fact there is an issue:

@media all and (min-width: [somevalue]){

works only if it’s inside a regular (non query) css.

The script crashes if you have a css query on your html

calling another query inside it!

[jefflembeck]

Closing this.. Nested queries are not currently supported.