Css @媒体查询在浏览器中不工作_Css_Media Queries

Css @媒体查询在浏览器中不工作

css

Css @媒体查询在浏览器中不工作,css,media-queries,Css,Media Queries,目前正在整合一个使用媒体查询的网站。所有主流浏览器似乎都没有显示媒体查询正常工作，但当我使用JSFIDLE时，它正是我想要它做的这里是Jsfiddle链接下面是媒体代码的快速视图 @media only screen and (min-width: 768px) { body { display:block; } #header { padding: 0px; margin: 0px; background-image: url(https://www.pen

目前正在整合一个使用媒体查询的网站。所有主流浏览器似乎都没有显示媒体查询正常工作，但当我使用JSFIDLE时，它正是我想要它做的

这里是Jsfiddle链接

下面是媒体代码的快速视图

    @media only screen and (min-width: 768px) {
body {
display:block;
}
#header {
    padding: 0px;
    margin: 0px;
    background-image: url(https://www.pendle.gov.uk/images/stage_2_symbol_3.png), 
    url(https://www.pendle.gov.uk/images/aviva_friends_life_logo_1.png);
    background-position: right top, left top;
    background-repeat: no-repeat;
background-size: 164px 120px, 200px 90px;
    width: 100%;
}
#footer {
    background-image: url(https://www.pendle.gov.uk/images/Ribble_valley_logo.png), 
    url(https://www.pendle.gov.uk/images/Pendle_logo.png);
    background-position: 1% 95%, 98% 95%;
    clear: both;
    background-repeat: no-repeat;
    padding: 5px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    background-color: #FFF;
}
#header h1 a:link, #header h1 a:active, #header h1 a:visited, #header h1 a:hover {
    float: right;
    color: #FFF;
    font-size: 0.6em;
}
#header h1 a {
    float: right;
 color: #FFF;
 margin: 65px 125px 0 0;
 font-size: 0.6em;
}}

有人能解释一下我在这里明显做错了什么吗

谢谢

将此元标记包含在您的头部部分

<meta name="viewport" content="width=device-width">

CSS看起来不错，它可能来自您的HTML 我们能看看你的HTML标题吗？确保使用

<!DOCTYPE html>

同样，对于响应性网站（移动版），一个很好的实践是使用元视口

<meta name="viewport" content="width=device-width, initial-scale=1">

尝试从以下位置更改：

@media only screen and (min-width: 768px) {

致：

它应该可以工作

尝试：
Try:
<meta name="viewport" content="width=device-width, initial-scale=1">

检查所有括号是否闭合。

我已经用头部部分更新了JSFIDLE，以防这导致问题。

Try:
<meta name="viewport" content="width=device-width, initial-scale=1">