반응형 크기에 따로 로고를 바꾸고 싶은데.. 채택완료
반응형 크기에 따라서 로고를 좀 바꾸고 싶은데
혹시 이것을 css 수정만으로도 가능할까요?
해당 로고가 보여지는 페이지 소스가
해당 css에서 접속기기가 480 이하일때는
main/logo.png 대신에 main/logo1.png이 보여줄려면 아래 소스를 어찌 수정해야 할까요?
@media only screen and (max-width: 480px){
#logo-bar{ }
#logo{ }
}
답변 3개
대강 아래와 같은 형태로 하면 되지 않을까요?
</font></p><p><font face="돋움" size="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></font></p><p><font face="돋움" size="3">
@media only screen and (max-width: 480px){
.big_logo {
display:none;
}</font></p><p> .small_logo {
display:block;
}
}</p><p>@media only screen and (min-width: 481px){
.big_logo {
display:block;
}</p><p> .small_logo {
display:none;
}
}
댓글을 작성하려면 로그인이 필요합니다.
가장간단한 방법으로는 백그라운드로 출력하는것이 어떨까 하내요..
#logo{ background:url('img/logo.png');}
@media only screen and (max-width: 480px){
#logo{ background:url('img/logo1.png');}
}
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인