Question

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

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

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

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

Answer 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%}

}

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

1 个答案: