Question

目前正在整理一个使用媒体查询的网站。所有主流浏览器似乎都没有显示媒体查询的工作情况，但是当我使用jsfiddle时，它确实完全符合我的要求。

继承Jsfiddle链接https://jsfiddle.net/asna03zq/

这里是媒体代码的快速视图

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

任何人都可以对我在这里明显做错的事情有所了解吗？

由于

Answer 1

在您的头部中添加此元标记。

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

Answer 2

CSS看起来不错，它可能来自您的HTML 我们可以看到你的HTML标题了吗？一定要使用

<!DOCTYPE html>

同样，响应式网站（移动版）的良好做法是使用元视口。

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

Answer 3

尝试更改：

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

为：

@media (min-width: 768px)  {

它应该使它工作

Answer 4

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

并检查所有括号是否已关闭。

@media查询无法在浏览器中运行

4 个答案: