스마트 폰에서 볼 때 고정 사이드 바를 멋지게 표시하는 방법

Question

간단한 웹 페이지 용으로 일부 맞춤 CSS와 함께 부트 스트랩을 사용하고 있습니다. 사용자가 #content div를 스크롤 할 때 위치를 유지하는 고정 된 사이드 바가 있습니다. 그러나 웹 페이지가 스마트 폰에서 보일 때 (또는 브라우저의 너비가 더 작아지면) 사이드 바는 웹 사이트의 윗부분을 멋지게 차지하는 대신 불안정한 행동을합니다.

내가 바라는 동작은 Twitter's bootstrap site과 동일합니다. 브라우저의 너비를 줄여서 무슨 뜻인지 확인하십시오.

내 현재의 구조는 다음과 같다 : 당신은 그것을 위해 미디어 쿼리를 사용할 수 있습니다

<div class="span3" style="position:fixed"> 
    // sidebar stuff 
</div> 

<div class="span8 offset3"> 
    // content 
</div> 

Answer 1

.

미디어 쿼리는 특정 미디어 기능의 조건을 확인하는 미디어 유형과 0 개 이상의 표현식 으로 구성됩니다.

쿼리 스타일 시트는 뷰포트 (문서 렌더링 화면/문서의 일부) 폭을 갖는 장치 (400) 내지 (700)의 화소에 사용할 수 있음을 표현이 가능 매체

@media screen and (min-width: 400px) and (max-width: 700px) { … } 

소스 : http://www.w3.org/TR/css3-mediaqueries/