모바일 브라우저에서 헤더가 겹치는 이유는 무엇입니까?

Question

모바일 브라우저에서 볼 때 헤더 영역이 중복되지 않도록하려면 어떻게합니까? http://androdevlab.com?

Answer 1

미디어 쿼리를 사용해야합니다. 현재 미디어 쿼리에 대한 자세한 내용을보실 수 있습니다 :

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

http://reference.sitepoint.com/css/mediaqueries

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

또한 FitText.js 같은 플러그인을 사용할 수 있습니다 - http://fittextjs.com/

사이트의 코드를 보면 Firebug에서 가장 중요한 문제는 '안드로이드 기기의 뉴욕에있는 이동식 실험실이 당신의 문에 배달되었습니다'라는 라인 높이가 너무 크다는 것입니다. 현재 값이없는 '1.8'입니다. 어쩌면 1em 또는 1.25em의 작은 값으로 설정하십시오. 마찬가지로 nav-primary li a 클래스의 경우

또한 nav 요소의 너비는 980px이므로 모든 장치에서 고정 값이됩니다. 어쩌면 당신은 % 또는 em 기반 값을 설정할 수 있습니다.

@screen CSS를 동일하게 유지하면서 모바일 버전의 많은 요소를 변경해야하는 경우 미디어 쿼리를 사용해야합니다. 작업을 훨씬 쉽게 처리합니다.

Answer 2

다양한 responsive design 트릭을 사용해야합니다. 설정 : meta 뷰포트 태그, @media는 adjusted css를 쿼리합니다. 헤더의 여백과 크기를 다른 설정 크기 등의 px 대신 % 또는 em으로 지정하면 syze 같은 js 라이브러리와 html5boilerplate과 같은 프로젝트를 사용할 수 있습니다.