작업실

그누보드5 ASR 스킨 new-basic테마에서 해상도에 따른 반응형 추가하기

컨텐츠 정보

본문

기존의 테마는 반응형이지만 최대 가로폭이 1200px이었습니다.


요새는 1600px, 1920px, 2560px 등등 모니터의 크기가 커지면서 홈페이지의 가로폭도 커질 필요성이 높아졌습니다.


그래서 부트스트랩 기반의 new-basic테마를 수정하면서 모니터 크기에 따라 홈페이지 가로폭도 넓힐 방법을 알려드리고자 합니다.


/amina/thema/new-basic_0.3/assets/bs3/cssbootstrap.min.css


위 파일에서


@media (min-width:1200px){.container{width:1170px}}


위 내용 찾아서 그 오른쪽에


@media (min-width:1440px){.container{width:1400px}}


위 내용을 붙여넣습니다.


그리고


/amina/thema/new-basic_0.3/colorset/Basic/colorset.css


에서



@media all and (min-width:1200px) {

.at-thema .slider { width: 100%; }

.navbar-wp .dropdown-menu { margin-top: 0px !important; }

.boxed.wrapper { margin: auto; width: 1230px; }

.boxed .navbar-fixed .navbar { max-width: 1230px; }

}



위 내용을


@media all and (min-width:1440px) {

.at-thema .slider { width: 100%; }

.navbar-wp .dropdown-menu { margin-top: 0px !important; }

.boxed.wrapper { margin: auto; max-width: 1440px; width:100%;}

.boxed .navbar-fixed .navbar { max-width: 1440px; }

}


@media all and (max-width:1439px) and (min-width:1200px) {

.navbar-wp .dropdown-menu { margin-top: 0px !important; }

.boxed.wrapper { margin: auto; max-width: 1230px; width:100%;}

.boxed .navbar-fixed .navbar { max-width: 1230px; }

}


위와 같이 변경합니다.



이것을 응용하면 더 다양하게 해상도에 따라 나눌 수 있습니다 ^^

관련자료

  • 서명
    우성짱의 NAS를 운영하고 있습니다.

    저의 즐거움이 여러분의 즐거움이면 좋겠습니다.

댓글 2 / 1 페이지

희망규짱님의 댓글

오우~ 저기저 질문 하나만 할게요 ㅋ
http://eyoom.me/bbs/board.php?bo_table=asr1&wr_id=42 현제 요기 스킨가지고 있는데 요것도 적용시키면 될까나요? 반응형인지라.
전체 157 / 1 페이지
RSS

최근글


새댓글


알림 0