my css3 media queries won't work when I move it to another site with https_问答_开发者

my css3 media queries won't work when I move it to another site with https

开发者 https://www.devze.com 2023-03-15 05:14 出处：网络

I try a simple css3 media queries that will change background color when I change the browser to 480px width. It works fine when i put the files on my site, here: http://www.kangtanto.com/css3/ . But

相关专题：css https media

I try a simple css3 media queries that will change background color when I change the browser to 480px width. It works fine when i put the files on my site, here: http://www.kangtanto.com/css3/ . But when I try the same files on my other site, with https, the media queries just won't work, the background color won't change when I change my browser size to 480px width. it is on my other site at https://dosenjaga.eepis-its.edu/home.html

this is my html code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type开发者_C百科="text/css" media="only screen and (max-width:480px)" href="css3.css" />

    </head>
    <body>
    <div id="wrapper">
    <div id="header">
        <h1>Ini hanya mencoba saja lho</h1>
    </div>
    <div id="content">

    Adding the specific code for devices inline might be a good way to use media queries if 
    you only need to make a few changes, however if your stylesheet contains a lot of 
    overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
    </div>
    </div>
    </body>
    </html>

and this is my style.css file. On my other site I use style2.css, because there is a file with the same name on my server, so I gave it other name but the code is the same.

div#wrapper { width: 800px;}
    div#header{
        background-image:url(media_queries.png);
        height: 93px;
        position:relative;
    }

    div#header h1{
        font-size:140%;
    }
    #content{
        float:none;
        width:100%;
        background-color:#CCC;  
    }
    #navigation{
        float:none;
        width:auto;
    }

and this is my css3.css code

@media only screen and (max-width:480px){
    div#wrapper { width: 400px;}
    div#header{
        background-image:url(media_queries.png);
        height: 93px;
        position:relative;
    }

    div#header h1{
        font-size:140%;
    }
    #content{
        float:none;
        width:100%;
        background-color:#8787C1;   
    }
    #navigation{
        float:none;
        width:auto;
    }
}

Thanks,

It is the problem of older versions of IE not the https, CSS3 is not supported in less then IE9. in IE9 it is working fine.

It's solved!!! I need to delete all my browser history by pressing Shift+ctrl+del on my fire