휴대 기기의 로고가 더 작아지고 왼쪽에 표시되도록하려면 어떻게해야합니까?

Question

방금 ​​머리글 이미지 상단에 로고를 배치했습니다. 데스크톱에서는 완벽하지만, 모바일로 변경하면 오른쪽에 떠 다니는 메뉴를 덮고 있습니다.

나는 왼쪽 구석에 머물러있게하고 싶지만 작게 유지하고 싶다.

내 PHP는 다음과 같습니다

<a href="/"> <id="logo"><img class="img-logo" src="<?php echo TEMPLATE_DIR; ?>/images/logo.png" width="180" alt="logo"></a> 

    <img class="headerpic" src="<?php echo TEMPLATE_DIR; ?>/images/headspacer.jpg" alt="" /> 
     <div class="infobox"><div class="inner">  
    </div> 

를하고 스타일링은 다음과 같이 현재 :

내가 로고 GET 조금 작다 있는지 확인하기 위해 추가로 필요한 스타일링 또는 변경

.img-logo{ 
position:absolute; 
top: 120px; 
left: 250px; 

} 

.header img.headerpic { 
    max-width:100%; 
    top: 0px; 
    left: 0px; 
    position: relative !important; 
    z-index: -1500; 
} 

모바일 왼쪽 상단으로 이동합니까? The Actual reaction to the styling

Answer 1

는 기본적으로 화면의 크기에 따라 응용 프로그램을 반응하게됩니다 뷰포트 http://www.w3schools.com/css/css_rwd_viewport.asp

이를 사용하여 시도했다.

이 동작을 테스트하기위한 한 가지 팁은 기기 유형에 따라보기 포트 크기를 변경할 수 있도록 Google 크롬 콘솔을 사용하는 것입니다.

@media screen and (max-width: 829px) { 

/* Your css for smaller screen here */ 
} 
@media screen and (min-width: 830px) { 
/*Your css for bigger screen here*/ 
}