TIL 09 | Media Query

Saemsol Yoo·2020년 12월 13일

html / css

목록 보기

9/12

Responsive Web 을 위해서 반드시 알아둬야 하는 필수적인 기능이다.

① HTML <head> 태그에 meta 태그를 이용해서 유저가 현재 보고있는 디바이스의 width를 맞추는 작업이 필요하다.

<head>
	<meata name="viewport" content="width=device-width">
</head>

② CSS에 media query 작성하기

	@media screen and (min-width: 768px) {
    		/* css 스타일 선언 */
        }

	@media screen and (min-width: 576) and (max-width: 767px) {
    		/* css 스타일 선언 */
        }

☁️ screen 자리에는 speech | print | all 이 들어갈 수 있다.
☁️ and 자리에는 not | only | ,(comma) 가 들어갈 수 있다.

③ 디바이스 별 사이즈 (참고)

Becoming a front-end developer 🌱

2020년 12월 13일

답글 달기