I cannot find info anywhere on exactly how to setup respond.js.
I unzipped into htdocs - is this correct? Or do I just need respond.min.js in htdocs?
Then simply reference the file like this...
<script src="respond.min.js"></script>
Currently, I have this in my head section, have tried before and after my media queries, yet NO stylesheet is used.
Is there a tutorial anyhwere on exactly how to set up resonse.js, as I have no idea if I am doing something wrong or whether there is another problem.
Any help would be much appreciated, my site is FINALLY finished yet I don;t want it to go live without media queries and currently if I use media queries, no stylseheet is loaded at all in IE8.
Thanks
This is my current code;
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src=".js"></script>
<script src="http://localhost/respond.min.js"></script>
<![endif]-->
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:600px) and (max-device-width:1024px)" href="http://localhost/oldScreen.css">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:1025px)" href="http://localhost/home.css">
<title>Eastbourne Netball League[Home] </title>
</head>
I cannot find info anywhere on exactly how to setup respond.js.
I unzipped into htdocs - is this correct? Or do I just need respond.min.js in htdocs?
Then simply reference the file like this...
<script src="respond.min.js"></script>
Currently, I have this in my head section, have tried before and after my media queries, yet NO stylesheet is used.
Is there a tutorial anyhwere on exactly how to set up resonse.js, as I have no idea if I am doing something wrong or whether there is another problem.
Any help would be much appreciated, my site is FINALLY finished yet I don;t want it to go live without media queries and currently if I use media queries, no stylseheet is loaded at all in IE8.
Thanks
This is my current code;
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode./svn/trunk/html5.js"></script>
<script src="http://localhost/respond.min.js"></script>
<![endif]-->
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:600px) and (max-device-width:1024px)" href="http://localhost/oldScreen.css">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:1025px)" href="http://localhost/home.css">
<title>Eastbourne Netball League[Home] </title>
</head>
-
if
response.min.jsis in the same folder as your html file, it should be fine. When you unzipped it, maybe it created a subfolder. In that case it should be<script src="subfoldername/response.min.js"></script>– Skwal Commented Feb 19, 2014 at 19:32 - Well it e sin a folder with loads of subfolders and files, but ther eis no explanation as to what to do with these files. Everything is in htdocs, I have tried leaving response.min.js in its folder/sub folder and referencing it fully, and have tried just pasting it on its own into htdocs, and referencing as above. Nothing happens – DJC Commented Feb 19, 2014 at 19:35
- When you say "nothing happens", does it mean it can't find the file? Or it just means that your media queries don't work? – Skwal Commented Feb 19, 2014 at 19:40
- well the media queries work without response.js in chrome, IE9 etc, but just by having them, it means when I run in IE8, NO stylesheet is run, it is just plain html. Hence, by using response.js, I should be able to use my existing media queries and even get IE8 to choose a file depending on screen size. However, I have no idea what the problem is, but the problem remains exactly the same as before I found respond.js - media queries work in chrome, IE9, FF, but NO stylesheet is used in IE8. This is the worst case scenario! – DJC Commented Feb 19, 2014 at 19:43
-
In the Developer Tool panel (on any recent browser), do you see a
404error? (or any javascript error in the console) – Skwal Commented Feb 19, 2014 at 19:49
1 Answer
Reset to default 3Alright, since the file is loaded, the problem has to e from one of these 2 points:
From the documentation:
Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop @media screen and (min-width: 480px){ ...styles for 480px and up go here }
Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media'd content)
My guess is the second point :)
I hope it helps.
[edit]
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" media="screen and (min-width:600px) and (max-width:1024px)" href="http://localhost/oldScreen.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width:1025px)" href="http://localhost/home.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode./svn/trunk/html5.js"></script>
<script src="http://localhost/respond.min.js"></script>
<![endif]-->
<title>Eastbourne Netball League[Home] </title>
</head>
If this doesn't work, put it this way inside your CSS file:
@media {min-width:600px) and (max-width:1024px) {
/* your css here */
}
@media {min-width:1025px) {
/* your css here */
}
Therefore, you can even put all your CSS in the same file