当我使用 https 将其移动到另一个站点时，我的 css3 媒体查询将无法工作

发布于 2024-11-17 02:11:16 字数 2219 浏览 0 评论 0原文

我尝试了一个简单的 css3 媒体查询，当我将浏览器宽度更改为 480px 时，它会更改背景颜色。当我将文件放在我的网站上时，它工作正常，在这里： http://www.kangtanto.com/css3/ 。但是，当我在其他网站上使用 https 尝试相同的文件时，媒体查询将无法工作，当我将浏览器大小更改为 480px 宽度时，背景颜色也不会改变。它位于我的另一个网站上 https://dosenjaga.eepis-its.edu/home.html< /a>

这是我的 html 代码：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="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>

这是我的 style.css 文件。在我的另一个网站上，我使用 style2.css，因为我的服务器上有一个同名的文件，所以我给了它其他名称，但代码是相同的。

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;
    }

这是我的 css3.css 代码

@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;
    }
}

谢谢，

原文

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="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,

分享到QQ

分享到微博