관리 메뉴

KorSA

[ HTML/CSS ] 반응형 웹 - media query 본문

Knowledge Wiki/HTML&CSS

[ HTML/CSS ] 반응형 웹 - media query

Praiv. 2021. 12. 8. 18:25
320x100

1. media query -> 반응형에 사용
    CSS 파일 최하단에 적음!!
    여러개 써도 됨

// 현재 브라우저 폭이 1200px이하면 font-size를 30px로
@media screen and (max-width: 1200px){
	.main-title {
		font-size: 30px;
	}
}


2. media query 쓸 때 다른 사람들이 많이 쓰는 breakpoint 기준 px값을 사용하는 게 좋음
    1200px
    992px
    768px
    576px
    단위를 많이 사용함

    보통 breakpoint는 3개정도, 많으면 4개 정도가 적당함.
    너무 많으면 복잡하고 관리도 어려움.

 

3. CSS 덮어쓰기
    1) 그냥 같은 클래스명 하단에 쓰기
    2) 우선순위 높이기
    3) specificity 높이기

728x90
728x90
Comments