[CSS]미디어쿼리

미디어쿼리란?

- 화면 크기가 다른 모바일이나 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 css 구문

 

 

미디어쿼리 사용법 - @media

 

<style>
.media{
	width: 500px;
	height: 500px;
	background-color: red;
}

@media (min-width: 320px) and (max-width: 800px){
.media{
    width: 300px;
    height: 300px;
    }
}
</style>

- 가로폭이 최소 mid-width, 최대 max-width일 때 @media 내부에 입력된 css 속성으로 대체하겠다는 의미

 

 

미디어쿼리 주의사항 - viewport

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

미디어쿼리가 제대로 작동하지 않을 때 viewport로 너비와 배율을 설정해야 모바일에서 의도한 화면을 볼 수 있다.

 

• width=device-width : 가로폭을 기기의 width로 설정

• initial-scale=1.0 : 초기 비율을 1.0으로 설정

 

 

css속성 상속

 

<style>
.media{
	width: 500px;
	height: 500px;
	background-color: red;
}

@media (min-width: 320px) and (max-width: 800px){
.media{
    width: 300px;
    height: 300px;
    background-color: none;} /**상속받지 않고자 할 때 none 입력**/
}
</style>

미디어쿼리는 외부 영역의 css속성을 상속받는다. 만약 상속받지 않고자 하면 none을 입력한다.