작업실

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

컨텐츠 정보

  • 10,832 조회
  • 2 댓글
  • 0 추천
  • 목록

본문

기존의 테마는 반응형이지만 최대 가로폭이 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 / 7 페이지
RSS

최근글


새댓글


알림 0