작은 화면

작은 화면

Fixed header and a responsive website issue 그래서 내가 마침내 금하지만 화면이 텍스트 아래로 크기를 조정할 때입니다 왼쪽으로 점프 일어날 것 같다 생각 쿼리하여 내가 미디어를 사용하는 방법에 대한 어젯밤에 질문을 게시

에 탐색 작업을 만들기 사라집니다. 나는 내가해야만하는 것이 같은 크기와 화면을 만들 것이라고 생각했다. CSS를이

//Navigation 
#main-nav { 
-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25); 
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25); 
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25); 
-webkit-transition: box-shadow 0.2s linear; 
-moz-transition: box-shadow 0.2s linear; 
-ms-transition: box-shadow 0.2s linear; 
-o-transition: box-shadow 0.2s linear; 
transition: box-shadow 0.2s linear; 
border-bottom: 1px solid rgba(0, 0, 0, 0.2); 
display: block; 
position: fixed; 
top: 0; 
left: 0; 
float: left; 
width: 100%; 
z-index: 12; 
height: 60px; 
background-color: white; 

#wrapper { 
    position: relative; 
} 

.inner-nav { 
    margin-left: auto; 
    margin-right: auto; 
    width: 800px; 
} 

ul { 
    float: right; 
    margin: 0; 
    width: 600px; 

    li { 
     vertical-align: middle; 
     display: inline; 
     margin: 0 2px; 
     color: black; 
     list-style-type: none; 

     a { 
      text-decoration: none; 
     } 

    } 

} 
}

압축으로 SCSS 형식에서 내가

를 호출하고있는 미디어 쿼리 - 여기

코드

HTML

<body> 
<div class="container"> 
<nav id="main-nav"> 
    <div class="inner-nav" id="nav-wrapper">   
      <div class="ten columns"> 
       <ul> 
        <li><a href="/">Test</a></li> 
        <li><a href="/">Test</a></li> 
        <li><a href="/">Test</a></li> 
      </div> 
    </div> 
</nav> 


</body> 
</html>

CSS입니다

/* All Mobile Sizes (devices and browser) */ 
@media only screen and (max-width: 767px) { 
    #nav-wrapper{ 
     width:767px; 
    } 

}

누구나 내가 할 일이 무엇인지 말해 줄 수 있습니까? 화면이 모바일 인 경우 탐색기가 화면에 맞게 크기가 조정됩니다. 또한 position:fixed 내가 그것을 원하는 방법 그래서 사용자가 스크롤 막대 상단에있는 탐색 막대를 알고. nav가 전체 사이트의 맨 위에있는 커버를 만드는 방법이 있다면 나는 프레임 워크로 position:fixed을 사용해야합니다. (http://www.getskeleton.com/)이 작업을 수행하는 것을 허용하지 않는 것 같습니다.

https://simple.com/과 같은 디자인을 사용하려고하지만 jQuery에는 페이지 상단과 하단의 콘텐츠 상단에있는 nav 태그가 없습니다. 그들의 소스를 살펴 보았지만 사용자 정의 스타일 시트를 사용하고 있으며 또한 압축되어 있습니다.

편집

내가 후에 누구인지, 나는 그것이 화면에 맞게됩니다 모바일 장치에 있도록 또한 응답 고정 된 헤더 웹 사이트를 원하는 명확하지 않을 수 있습니다. 간단한 사이트는 사람들이 사이트에서 모든 귀를 어떻게 사용했는지 알면 작동하는 무언가입니다.

출처

2012-12-07 joshuahornby10

미디어 쿼리에서 볼 수있는 문제는 화면의 너비가 767px로 낮아 졌을 때 CSS 프로세서가 너비가 767px 인 nav-wrapper 요소를 렌더링한다고 말합니다. 따라서 사용자가 480 픽셀 너비의 장치를 통해 페이지에 액세스하면 화면이 오버플로됩니다.

달성하려는 목표를 잘 모르겠지만 가장 좋은 방법은 미디어 쿼리에서 너비를 100 %로 설정하거나 완전히 삭제하고 너비를 상속하는 것입니다. 해당 요소에 대한 이전 CSS 선언).

출처

2012-12-07 14:30:17 Augusto

내가 방금 생각한 것. 그렇다면 사용자가 480px 장치에있을 때 올바른 방법은 무엇입니까? 너비를 100 %로 설정하거나 제거하면 미디어 쿼리가없는 것처럼 해당 문제가 해결되지 않습니다. – joshuahornby10

이전 질문을 읽은 후에 무엇을 하려는지 이해할 수 있다고 생각합니다. 미디어 쿼리는 주로 CSS를 사용하여 요소를 나타내는 방식을 수정하기 위해 사용하기 때문에 미디어 쿼리를 전혀 사용하지 않습니다. . 요소의 기본 모양 모양을 유지하려는 경우 원래의 너비를 수정할 필요가 없습니다. 어쩌면 네가 맞지 않을 수도 있기 때문에 네비게이션 안의 요소를 조정해야 할 수도있다. 문제의 스크린 샷을 게시 할 수 있다면 좋을 것입니다. – Augusto

내가 뭘하고있는 건이 https://simple.com/과 같은 사이트입니다. 즉, 고정 된 항법입니다. 사이트를 모바일에서 볼 때 축소되고 탐색이 변경됩니다. 그것은 내가 추측하는 미디어 쿼리입니까? 이 템플릿과 같은 사이트가 있습니까? 화면/콘텐츠 전반의 헤더/콘텐츠. – joshuahornby10

답변

관련 문제