미디어 쿼리는 화면 , 테블릿 , 그리고 어플
적어도 하나 이상의 표현식으로 구성된다.

컨텐츠의 변경없이 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다.

화면을 그리기 전 우선적으로
데스크탑을 우선기준으로 삼을지
어플 기준으로 삼을지 정하는데 ,

개인적으로 어플 기준으로 우선 화면을 그리는것을 추천한다.

max-width

// 데스크탑에서 사용될 스타일을 적용 

@media screen and (max-width : 500px ) {
	// 모바일 환경에서 사용될 스타일 적용
	.test {
		border : 1px solid red;
	}
}

웹사이트를 만들때 일반적으로 screen , all 을 사용하는것이 일반적입니다.

min-width

// 모바일 환경에서 적용될 스타일 적용 
@media screen and (min-width : 500px ) {
	// 데스크탑 환경에서 사용될 스타일 적용
	.test {
		border : 1px solid red;
	}
}