반응형제작하기 레이아웃구성

 

반응형 사이즈 구성
사이즈	실제사이즈 (최소크기맞추기)	시안사이즈 (실제 최소크기 X2)	분기점
모바일	360	720	768이상부턴 태블릿으로 인식 @media (max-width:767px)
태블릿	768	1200
데탑	1200	1200 or 1280 / 1920 (1400/1600 지양 : 펼쳐진 디자인으로 내용구성이 어려움)

640px 창대응을한 이상한 단위

데탑에서 분기점을 기준으로 모바일 / 태블릿을 대응할 수 있게 분기점 설정을 해준다. 

 

이때 제이쿼리 @media 로 max-width를 설정 flex ,position 등 레이아웃에 맞게 적용 

---

예제1.

 

 

 

 

예제와 같이 

각레이아웃이 분기점 별로 변경될수있게

min-width 단위 사용

모바일	타블랫	pc
/* 모바일 분기점 잡기 순서변경 안됨*/ @media (max-width:767px) {   .main_section01 .inner {     padding: 0 20px;   }   .main_section01 .bottom {     /* 수직으로내리기 필수 */     flex-wrap: wrap;   }   .main_section01 .bottom li {     width: 100%;   } }	/* 타블랫 반응형에서 width 고정값없음 무조건 max-width 사용 */ .main_section01 .inner {   /* 패딩으로 여백 포함해서 최소넓이 지정 */   max-width: 1240px;   /* 타블렛 여백을 미리지정 창이 줄었을때 안붙게함 */   padding: 0 20px;   margin: 0 auto;   /* font-size: 40px; */   font-size: 4rem; }	/* 모바일 최소단말기 크기인 320으로 잡으면 그이하 화면은 대응할 필요없음 */ #wrap {   min-width: 320px; }

 

 

패딩값을 미리 설정

 

 

---

 

예제2

 

/* pc(소) 분기점 */
@media (max-width:1366px) {
  .main_section02 .box_wrap {
    flex-wrap: wrap;
  }
  .main_section02 .box_wrap .box03 {
    width: 100%;
  }
}

/* 타블랫 분기점 */
@media (max-width:1200px){
  .main_section02 .box_wrap .box01 {
    width: 100%;
  }
  .main_section02 .box_wrap .box02 {
    order: -1;
    width: 100%;
  }
}