2
저는 CSS로 전체적으로 반응이 빠른 디자인을 처음 접했습니다. 방금 작동하는 응답 메뉴를 만들었고 브라우저 창을 작게 만들면 내 PC에서 제대로 작동하지만 내 휴대폰에서 사이트를로드하면 축소되어 메뉴가 응답 성있는 것으로 표시되지 않습니다. 반응 형 메뉴가 모바일에서 작동하지 않습니다.
가 나는, 사람이 작업을 수행하는 이유 단서가 없다? 최대 너비를 900px로 설정 했으므로 창이 너무 짧으면 메뉴가 실제로 고장납니다.이
메뉴에 대한 HTML입니다 :<ul class="topnav" id="myTopnav">
<li><a href="#">Fonder</a></li>
<li><a href="#">Priser</a></li>
<li><a href="#">Produkter</a></li>
<li><a href="#">Frågor</a></li>
<li><a href="#">Juridik</a></li>
<li><a href="#">Om oss</a></li>
<li><a href="#" class="active">Hem</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
그리고 이것은 JS입니다 :
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
그리고 이것은 반응 CSS입니다 :
@media screen and (max-width:900px) {
ul.topnav li {display:none;}
ul.topnav li.icon {
float: right;
display: inline-block;
opacity: 1;
}
}
@media screen and (max-width:900px) {
ul.topnav.responsive {position:relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
background-color: none;
opacity: 1;
}
ul.topnav.responsive li {
float: none;
display: inline;
position: relative;
top: 32px;
}
ul.topnav.responsive li a {
display: block;
text-align: right;
/*background-color: red;*/
}
}
이 몇 가지 코드를 제시해주십시오 아래 링크를 통해 이동, 내가 대답을 제안하고있다. – AymDev
두 미디어 쿼리 모두에서'max-width : 900px'와 동일한 이유를 사용하고 있습니다. –
부트 스트랩을 사용하려고 시도 했습니까? –