Я пробую простые медиа-запросы css3, которые меняют цвет фона, когда я меняю браузер шириной 480px.Он отлично работает, когда я размещаю файлы на моем сайте, здесь: http://www.kangtanto.com/css3/.Но когда я пробую те же файлы на моем другом сайте с https, медиазапросы просто не будут работать, цвет фона не изменится, когда я изменю размер своего браузера на ширину 480 пикселей.это на моем другом сайте по адресу https://dosenjaga.eepis -its.edu / home.html
это мой 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>
и это мой стильФайл .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;
}
}
Спасибо,