问题描述
Scheme of my issue with printscreens我是html和css的新手，无法解决问题。
我正在制作一个响应式网页。我为手机做了一个汉堡菜单，并针对不同的屏幕尺寸和方向应用了@media查询。 问题：
- 如果我在移动设备上打开菜单并更改手机方向-菜单停留在display：block，而不是改为display：flex;
- 如果我打开和关闭汉堡包-菜单保持显示状态：无，而不显示：flex;
- 如果刷新页面，一切都很好，并且菜单按照CSS文件中的指示正确显示。
如果我理解正确，则内联操作“ onclick”会阻止我的第二个CSS文件（我有2个文件-一个用于移动设备，第二个-用于其他屏幕）在更改方向后无法正常运行，并且我不知道如何要求这样做。
<script>
function myFunction() {
var x = document.getElementById("menu");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script> <link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="styles_mob.css" />
</head>
<body>
<nav>
<div class="container">
<div class="logo"><a href="index.html"><img src="img/Jurvale_logo_white.png" alt="logotipas" width="85%"></a></div>
<div class="icon"><a href="javascript:void(0);" onclick="myFunction()"><img src="img/icon.png" alt="icon" width="30"></a></div>
<div class="menuItems" id="menu">
<div class="col-2 pradzia"><a class="button" href="index.html">Pradžia</a></div>
<div class="col-2 apieMus"><a class="button" href="#.html">Apie mus</a></div>
<div class="col-2 paslaugos"><a class="button" href="paslaugos.html">Paslaugos</a></div>
<div class="col-2 kontaktai"><a class="button" href="kontaktai.html">Kontaktai</a></div>
</div>
</div>
</nav>这是“ styles_mob.css”
body,html {
width: 100%;
height: 100%;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 1.1rem;
margin: 0px;
background-image: none;
background-color: #ffffff;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10+ and Edge */
user-select: none; /* Standard Syntax */
}
* {
Box-sizing: border-Box;
}
[class*="col-"] {
width: 100%;
height: 100%;
border: none solid 2px;
}
.container {
display: grid;
grid-template-columns: 80% 20%;
grid-template-rows:auto auto;
overflow: hidden;
position: relative;
background-color: #FD5C6B;
padding: 10px;
justify-items: center;
align-items: center;
text-align: center;
}
.container #menu {
display: none;
}
.logo img {
max-width: 250px;
}
.menuItems {
grid-column: 1 / span 2;
grid-row: 2;
width: 100%;
border-bottom: white solid 1px;
}这是“ styles.css”
body,sans-serif;
font-size: 1.2rem;
margin: 0px;
background-image: url('img/back.jpg');
background-repeat: no-repeat;
background-size: cover;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10+ and Edge */
user-select: none; /* Standard Syntax */
}
* {
Box-sizing: border-Box;
}
[class*="col-"] {
width: 100%;
height: 100%;
}
/* -----Big screen in landscape mode----- */
@media screen and (min-width: 480px) and (orientation: landscape) {
body {
display: grid;
grid-template-columns: 40% 30% 30%;
grid-template-rows:minmax(auto,100px) auto 50% auto;
}
.hidden {
display: none;
}
.icon {
display: none;
}
.container2 {
grid-row:3 / span 1;
text-align: center;
}
.container .menuItems {
grid-column: 2 / span 1;
grid-row: 1;
width: 100%;
}
.motoPosition {
width: 100%;
}
.orderPosition {
width: 100%;
}
}
/* -----Big screen in portrait mode----- */
@media screen and (min-width: 480px) and (orientation: portrait) {
body {
display: grid;
grid-template-columns: 10% 50% 40%;
grid-template-rows:minmax(auto,100px) auto 40% auto;
}
.hidden {
display: none;
}
.icon {
display: none;
}
.container2 {
grid-column: 2 / span 1;
grid-row: 3 / span 1;
text-align: center;
}
.container .menuItems {
grid-column: 2 / span 1;
grid-row: 1;
width: 100%;
}
}
nav {
grid-column: 1 / span 3;
grid-row: 1;
display: grid;
grid-template-columns: 100%;
text-align: center;
}
.menuItems {
display: flex;
}
.container {
grid-column: 1 / span 1;
display: grid;
grid-template-columns: 25% 75%;
justify-items: center;
align-items: center;
background-color: RGBA(253,92,107,0.7);
}
.logo {
grid-column: 1 / span 1;
grid-row: 1;
width: 100%;
padding: 5px 10px;
}
.logo img {
max-width: 250px;
}提前谢谢！
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）