윈도우 크기 변경시 헤더의 크기 변경

아래는 전체 크기의 윈도우가 잘 동작하는 코드입니다. 그러나 창 크기가 변경되면 로고와 헤더가 제대로 표시되지 않습니다. Here is my code CSS를 변경해야하거나 부트 스트랩을 사용하여 CSS를 변경할 수 있습니까? 픽셀 값을 percentag로 변경해 보았습니다. 아직도 그것은 작동하지 않았다.윈도우 크기 변경시 헤더의 크기 변경

<div class='header'> 
    <img style='position:absolute;margin: 12px 10px;' src='https://business.microsoft.com/-/media/mssc/footericons/xbox.ashx?h=52&la=en&w=52&hash=94B5BB82970A4CF66DBE9F0D78B7E10EBD2D9A5B'/> 
    <h1 class="heading">My page</h1> 
</div>

출처

2016-06-04 user4324324

모든 CSS 코드를 별도의 파일에 저장하는 것이 좋습니다.

이미지를 H1 태그 안에 넣을 수 있으며 로고가 있으면 괜찮습니다.

.navContent{ 
min-width: 400px; 
}

출처

2016-06-04 11:04:21 flux

당신은 사용할 수 있습니다 : 당신은 그냥 같이, 최소 폭을 추가 ... 구조화 된 내용을 확인하고이 함께 머물 수 있도록하려는 경우,

.heading { 
    display: inline; 
}

을하지만 : 당신이 시작하는 것입니다 반응 형 CSS 아래에서 너비가 992px까지 창 크기를 조정할 수 있습니다. 코드 아래의 사용은 당신이 그것을 당신의 헤더 내용을 중복되지 않는 것입니다 볼 수있는 참조 용 스크린 샷을 첨부하고

/* responsive css start */ 
@media (min-width:992px){ 
.heading{ text-align: center;} 
.navContent{text-align: left;float: left; padding-left:0px; padding-right: 15px; position: relative;} 
/* responsive css end */

이 반응하게하는. 하지만 최대 너비 제한은 992px로 제한됩니다. 당신은 귀하의 요구 사항에 따라 변경할 수 있습니다.

출처

2016-06-04 11:13:34 GSB

윈도우 크기 변경시 헤더의 크기 변경

답변

관련 문제