⚫ CSS responsible web

Day·2022년 4월 4일
0
post-thumbnail
post-custom-banner

⏱ Responsible Web(반응형 웹)


@media only screen and (max-width: 480px) {
	body {
		font-size: 12px;
	}
}

@media : 이 키워드는 media 쿼리를 시작하겠다는 의미.

only screen : 어떤 디바이스에서 적용하는지 알려준다.
예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 된다.
screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용된다..

and (max-width : 480px) : 이건 media feature라고 불리는 부분.
어느 조건에 아래의 css를 적용할지 작성해줘야 한다.

@media only screen and (min-width: 320px) and (max-width: 480px)

0개의 댓글