ds3016 2014-02-19 19:19 采纳率: 100%
浏览 125
已采纳

respond.js设置教程

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>
  • 写回答

1条回答 默认 最新

  • dongwen7283 2014-02-19 20:11
    关注

    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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 全部备份安卓app数据包括密码，可以复制到另一手机上运行
  • ¥15 Python3.5 相关代码写作
  • ¥20 测距传感器数据手册i2c
  • ¥15 RPA正常跑，cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决，怎么运行
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗