2 가지 로고가 있습니다. html과 css 미디어 쿼리를 사용하여 모바일보기에서 더 작은 하나의 쇼를 만듭니다.

Question

저는 14 세의 그래픽 디자이너였습니다. HTML 및 CSS를 배우려고하는데 2 개의 로고가 있으며 데스크톱 및 태블릿보기에 표시하고 싶습니다. 모바일보기에서 보여주고 싶은 다른 로고.

내가 가지고있는 문제는 모바일보기에 도달 할 때 두 번째 로고를 가져 오는 CSS를 얻지 못하는 것입니다. 나는 html 안에 두 개의 로고를 둘 것인가, 아니면 css가 나의 폴더에서 두번째 로고를 붙잡을 것인가? 다른 뷰 크기의 로고를 대체하기 위해 미디어 쿼리를 어떻게 얻습니까? html이 어떻게 보이는지, 그리고 내가 가지고있는 코드에 대해 CSS가 어떻게 보이는지 알아야합니다.

이

@import url (assets/css/custom.css):; 

body {background: black} 

.btn {margin-left: 800px;} 

.style {margin-left: 800px;} 

.nav a{postion:relative; 
    left: 20px; 
} 
body { 
position: relative; 
top: 40px; 
} 
.navbar-fixed-top .navbar-brand { 
padding: 0 15px; 
} 

@media (max-width: 680px) { 

} 

Answer 1

귀하의 HTML 두 개의 작은 변화를 필요로 :

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container"> 
<nav role="navigation"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 

<a class="navbar-brand" href"#" id="logo"> <img src="logo.png" </a> 
<a class="navbar-brand" href"#"id="2logo"> <img src="relogo.png"</a> 
</div> 

이 내 CSS입니다 :

이

내 HTML입니다. 첫째, ID's can't start with a number 때문에 두 번째 로고에서 사용중인 # 2logo ID가 작동하지 않습니다. "logo2"로 변경하면 매력처럼 작동합니다. 또한 두 번째 이미지 태그에 닫는 꺾쇠 괄호가 없습니다.

이러한 오류가 수정되면 기존 html이 작동합니다. 아이디어는 기본적으로 두 번째 로고를 숨기고 첫 번째 로고 만 표시하는 CSS를 사용하는 것입니다. 그런 다음 미디어 쿼리 내부에서 두 번째 로고를 표시하고 원본을 숨 깁니다. 추가해야 할 CSS는 다음과 같습니다.

다른 방법이 있습니다. 로고를 배경 이미지로 추가하면 더 깨끗한 html이지만 의미가 약간 줄어들 수 있습니다. 그러나이 방법도 잘 작동합니다.