respond.js set up tutorial

Question

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.com/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>

Answer 1

Alright, since the file is loaded, the problem has to come 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.com/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

respond.js set up tutorial

Question

1 answers

solution1
3 ACCPTED 2014-02-19 20:11:29

respond.js set up tutorial

Question

1 answers

solution1 3 ACCPTED 2014-02-19 20:11:29

solution1
3 ACCPTED 2014-02-19 20:11:29