Reputation: 603
I am having troubles finding a good process to go about registering CSS3 media Queries in my website I'm creating. I've tried the css3-mediaqueries.js but that did nothing and now I have heard that Respons.js is the way to go, however I place it in after the css stylesheet(s) and check it out in IE 8 and it crashes my site every single time!
The site I have linked to I have kept the <script src="js/libs/respond.src.js"></script>
where I have placed it yet have deleted the .js file from the server or it'll just keep crashing.
Has anyone had this experience with Respond.js and any experience with registering CSS3 media queries for their own site? I've been trying to figure this out for quite a while now and it's quite frustrating.
I appreciate any advice!
Upvotes: 0
Views: 4331
Reputation: 21
My IE crashes when I use this combination in style.css:
@media screen and (max-width: 320px) {
#element {}
@media screen and (orientation:landscape) {
.element {}
}
}
after
@media screen and (max-width: 320px) {
#element {}
}
@media screen and (orientation:landscape) and (max-width: 320px) {
.element {}
}
WORKS WELL, NO CRASH IE! :)
Upvotes: 2
Reputation: 1290
It's a known issue with background images set to the body in IE8. See this issue on GitHub: https://github.com/scottjehl/Respond/issues/83
Try using the most recent version of Respond that Scott pushed last night: https://github.com/scottjehl/Respond/blob/master/respond.min.js, the problem should be fixed.
If that doesn't work, you could always try an approach without a polyfill by feeding IE the other screen styles in a conditional comment. This is easiest if you're using SASS or LESS, as you can import the styles into a secondary style sheet without media queries. For more info on that, check out this post: http://nicolasgallagher.com/mobile-first-css-sass-and-ie/. If you're not using a pre-processor it might not be worth the time though.
Upvotes: 1