Does it work with multiple MQs in 1 stylesheet? #123

Closed
ghost opened this Issue Apr 28, 2012 · 9 comments

6 participants

@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..

@viljamis

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

@ghost
@zachleat
Collaborator

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
Owner
@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
Collaborator

Closing this.. Nested queries are not currently supported.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment