웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Responsive Full Width Gride - codrop 본문

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] Responsive Full Width Gride - codrop

해피CGI윤실장 2019. 10. 23. 08:57


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

데모사이트에서 압축파일을 받으실 수 있으며 압축해제후

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: 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값이 포함되어 있어
디자인 작업에 유용한 디자인인것 같습니다.




홈페이지바로가기


저작자표시

'웹프로그램밍 자료실 > 기타 자료' 카테고리의 다른 글

[해피CGI][cgimall] 168 무료 벡터 아이콘 모음  (0) 2019.10.31
[해피CGI][cgimall] 수천개의 컬러 팔레트를 만나볼 수 있는 사이트 colorhunt  (0) 2019.10.25
[해피CGI][cgimall] ilovepdf.com - 브라우저에서 다양한 pdf 편집을 할수 있습니다  (0) 2019.10.21
[해피CGI][cgimall] ilovimg.com - 웹브라우저로 다양한 이미지 편집이 가능한 사이트  (0) 2019.10.18
[해피CGI][cgimall] 반응형 디자인에 강한 템플릿형 디자인을 확인할 수 있는 사이트 webdesign-inspiration  (0) 2019.10.17
공유하기 링크
'웹프로그램밍 자료실/기타 자료' Related Articles more
Comments