无论我做了什么，媒体查询都不起作用答案

【问题标题】：media query wont work no matter what i have done无论我做了什么，媒体查询都不起作用
【发布时间】：2019-07-15 07:12:37
【问题描述】：

我无法让媒体查询适用于不同的宽度。

我检查了元数据，我尝试了媒体所有媒体屏幕和仅媒体屏幕。

HTML

<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles/slicknav.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script type="text/javascript">
$(document) .ready(function(){$('#nav_menu') 
.slicknav({prependTo:"#mobile_menu"});});</script>

CSS

@media only screen and(max-width: 767px){
 header img{clear: both;}
 header{align-content: center;}
 section{float: none;}
 aside{float:none;}
 section img{max-width: 30%;}
 #mobile_menu{display: block;}
 #nav_menu{display: none;}

我希望样式规则在宽度改变时起作用。

【问题讨论】：

您是否收到任何错误，或者它只是在运行时不起作用，您是否有任何样式可以工作，或者它只是媒体查询（我假设只是查询，但只是想检查） ?
只是查询我没有错误我使用括号然后实时预览所以只是查询这就是为什么没有任何样式生效的原因
"@media only screen and (max-width:479px){ body{font-size: 90%;} #mobile_menu{display: block;} #nav_menu{display: none;} } @仅媒体屏幕和（最大宽度：959px）{ h1 {font-size：135%;} section h2{font-size: 120%} 除了 h2{font-size: 120%} }“这些也不起作用

标签： html css

【解决方案1】：

试试这个我注意到你可能有一些语法错误（如果你的选择器不是一个 id 我只是假设它是一个你可能需要检查的类）。

@media (max-width: 767px){
.header img{
 clear: both;
}
.header{
  align-content: center;
 }
.section{
 float: none;
 }
.aside{
 float:none;
}
.section img{
 max-width: 30%;
}
#mobile_menu{
 display: block;
}
 #nav_menu{
  display: none;
 }
}

编辑来回之后，这就是我想出的，它将在提供的链接上为我工作。

HTML

<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>San Joaquin Valley Town Hall</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/slicknav.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.slicknav.min.js"></script>
    <script type="text/javascript">
        $(document) .ready(function(){$('#nav_menu') .slicknav({prependTo:"#mobile_menu"});});</script>
</head>

CSS

@media (max-width: 767px){
    header img{clear: both;}
    header{align-content: center;}
    section{float: none !important;}
    aside{float:none;}
    section img{max-width: 30%;}

    #mobile_menu{display: block;}
    #nav_menu{display: none;}

}
@media (max-width:479px ){
    body{font-size: 90%;}
    #mobile_menu{display: block;}
    #nav_menu{display: none;}

}
@media (max-width: 959px){
    section h1{font-size: 135%;
    }
    section h2{font-size: 120%}
    aside h2{font-size: 120%}

}

【讨论】：

那不起作用我可以在不使用类或 id 的情况下调用标题，我只是尝试确保
你在什么浏览器和版本中测试这个？
您是否能够编辑您的问题以包含您尝试应用这些样式的 html 部分？
home.ite.sfcollege.edu/~brandon.trinckes/cgs1820/townhall/mod7/… 这是这里的网站，除了媒体查询之外，我可以计算出其他所有内容
谢谢，我看看