반응형 크기에 따로 로고를 바꾸고 싶은데..
본문
반응형 크기에 따라서 로고를 좀 바꾸고 싶은데
혹시 이것을 css 수정만으로도 가능할까요?
해당 로고가 보여지는 페이지 소스가
<div id="logo-bar">
<div class="container">
<div class="row">
<!-- Logo / Mobile Menu -->
<div class="col-lg-3 col-sm-3 ">
<div id="logo">
<h1><a href="main.php"><img alt="logo" src="main/logo.png"/></a></h1>
</div>
</div>
</div>
</div>
</div>
해당 css에서 접속기기가 480 이하일때는
main/logo.png 대신에 main/logo1.png이 보여줄려면 아래 소스를 어찌 수정해야 할까요?
@media only screen and (max-width: 480px){
#logo-bar{ }
#logo{ }
}
답변 3
대강 아래와 같은 형태로 하면 되지 않을까요?
<div id="logo">
<h1>
<a href="main.php">
<img class="big_logo" alt="logo" src="main/logo.png"/>
<img class="small_logo" alt="logo" src="main/logo1.png"/>
</a>
</h1>
</div>
@media only screen and (max-width: 480px){
.big_logo {
display:none;
}
.small_logo {
display:block;
}
}
@media only screen and (min-width: 481px){
.big_logo {
display:block;
}
.small_logo {
display:none;
}
}
logo1.png 용 이미지 출력 코드를 하나 더 만들어 클래스를 별도로 부여 후,
해당 너비일 때 안 보여줄 녀석은 해당 클래스에 display:none 속성 넣으시면 됩니다.
a - 보이기
b - display:none
480 너비일 때
a - display:none
b - display:visible
가장간단한 방법으로는 백그라운드로 출력하는것이 어떨까 하내요..
#logo{ background:url('img/logo.png');}
@media only screen and (max-width: 480px){
#logo{ background:url('img/logo1.png');}
}