Responsive Full Width Gride

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > HTML > 유용한 사이트 > Responsive Full Width Gride - codrop 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

html

mysql

jquery

image

API

Mobile

메뉴

slide

게시판

현재접속자 명

Responsive Full Width Gride - codrop

해피팀

네티즌

소스분류

유용한 사이트

다운로드 횟수

0 회

간단설명

반응형으로 디바이스 크기에따라 다르게 출력되는 그리드 디자인입니다.

평가하기

반응형으로 디바이스 크기에따라 다르게 출력되는 그리드 디자인입니다.
데모사이트에서 압축파일을 받으실 수 있으며 압축해제후

css/component.css파일과 index.html 파일에서 html코드 및 css를 확인하실 수 있습니다.

@media screen and (max-width: 1190px) {
.cbp-rfgrid li {
  width: 20%; /* Fallback */
  width: -webkit-calc(100% / 5);
  width: calc(100% / 5);
}
}

@media screen and (max-width: 945px) {
.cbp-rfgrid li {
  width: 25%; /* Fallback */
  width: -webkit-calc(100% / 4);
  width: calc(100% / 4);
}
}

@media screen and (max-width: 660px) {
.cbp-rfgrid li {
  width: 33.3333333%; /* Fallback */
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
}
}

@media screen and (max-width: 400px) {
.cbp-rfgrid li {
  width: 50%; /* Fallback */
  width: -webkit-calc(100% / 2);
  width: calc(100% / 2);
}
}

@media screen and (max-width: 300px) {
.cbp-rfgrid li {
width: 100%;
}
}

위 코드와같이 width값이 %도 있지만 calc를 이용하여 칸을 나눈게 특징인듯합니다.
calc의 같은경우에는 특정 안드로이드 os의 같은경우에는 작동이 하지 않으니 width값이 포함되어 있어
디자인 작업에 유용한 디자인인것 같습니다.

네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)

내용

아이디

의견남기기

등록된 의견이 없습니다.