반응형 디자인

반응형 디자인 개요

반응형 디자인

• 뷰포트 화면 크기가 다양해짐에 따라 그 화면에 맞추어지는 디자인 개념

미디어 쿼리

@media media-type and (media-feature-rule) {
	/* CSS */
    body {
    	color:red;
    }
}

• media-type -> all or screen 사용
• and ( 조건 입력 ) 후 하위에 css 작성
• and 나열로 여러가지 조건 동시 적용 가능
• and 대신 , 사용 시 or로 사용 가능

orientation

• randscape -> 가로모드일 때 적용
• media (orientation:randscape)

breakpoint

• 반응형 디자인의 분기 처리, 대응할 화면 종류가 많을수록 breakpoint도 증가
• 작은 것 -> 커지는 방식 ( 모바일 퍼스트 )
• 큰 것 -> 작아지는 방식 ( 데스크탑 퍼스트 )