내 머리글 크기를 줄이면 어떻게됩니까?

-5

보통 큰 윈도우 크기

를 윈도우 크기 메뉴 바 시프트를 감산 한 후 코드이다. HTMl과 CSS를 첨부했습니다.

참조 비디오 링크 ->https://www.youtube.com/watch?v=TTbYFzAz-Lg

내가 반응 네비게이션 바을 만들기 위해 노력했다 ..하지만 난 네비게이션 바 창 크기 씩 감소의 동작을받지 못했습니다.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title> 
      Responsive Navigation Bar 
     </title> 
     <link href="style.css" rel="stylesheet" type="text/css"> 
     <meta name="viewport" content="width=device-width initial-scale=1"> 
    </head> 
    <body> 
     <div id="header"> 
      <div id="logo"> 
       <img src="Redbull-logo.png"> 
      </div> 
      <ul id="navbar"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Service</a></li> 
       <li><a href="#">Product</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">About</a></li> 
      </ul> 
     </div> 
    </body> 
</html>

CSS

*{ 
    margin: 0px; 
    padding: 0px; 
} 

body{ 
    background: skyblue; 
} 

#header{ 
    width: 100%; 
    height: 80px; 
    background: #333; 
    box-shadow: 0px 3px 4px gray; 
} 

#navbar{ 
    width: 1000px; 
    height: 80px; 
    float: right; 
} 

#navbar > li{ 
    width: 198px; 
    list-style: none; 
    float: left; 
    border-right: 1px solid gray; 
    border-left: 1px solid gray; 
} 

li > a{ 
    display: block; 
    color: white; 
    line-height: 80px; 
    text-align: center; 
    font-family: cursive; 
    font-size: 20px; 
    text-decoration: none; 
} 

li > a:hover, 
li > a:focus{ 
    background-color: skyblue; 
    color: #333; 
} 

#logo{ 
    width: 200px; 
    float: left; 
    height: 80px; 
    padding-left: 40px; 
}

출처

2017-12-05 Karsh Soni

왜 당신은 몇 가지 코드를 게시하지 않습니다 어떻게 작동하는지의 예? – jhpratt

더 나은 질문을 할 수있는 몇 가지 링크가 있습니다. https://stackoverflow.com/help/how-to-ask, [MCVE] –

-1

기본적으로 당신이 탐색 모음에 충분한 공간이 아니라 모든 링크에 대한가없는 화면의 크기를 줄일 때입니다 무슨 일이 일어나고 있는지 당신의 이미지를 두 줄로 밀어 넣으면 미디어 쿼리를 조사하여 이미지 너비와 탐색 링크 크기와 같은 특정 너비로 바뀝니다.

이

@media (max-width: 1080px){ 
    navbar-links{ 
    font-size: 0.8em; 
    padding: 0px 5px; 
    } 

    navbar-image{ 
    width: 500px; 
    }

출처

2017-12-05 04:45:07 A61NN5

코드를 제공하지 않고 해당 질문에 대해 명확하지 않은 주제 질문에 답하지 마십시오. 문제는 너무 광범위합니다. 그렇게하면 SO의 유용성이 희석됩니다. – Rob

나는 내 대답을 얻었다 고 생각한다. 하지만 크기가 줄어들면 링크가 두 번째 줄로 밀어 넣어지고 링크가 사라지지만 이미지가 그대로 유지되는 이유는 무엇입니까 ?? –

@ Karsh Soni 네비게이션 링크가 이미지 너비와 너비 링크에서 특정 너비로 미디어 쿼리를 설정해야하므로 Navbar가 두 개로 나뉘어 미디어 쿼리를 설정하고 이미지를 더 작게 만들 때 말합니다. 이것이 확실히 다루어지기 때문에 기본적인 CSS 클래스를 사용하는 것을 고려할 것입니다. – A61NN5

내 머리글 크기를 줄이면 어떻게됩니까?

답변

관련 문제