픽셀 단위 고정 대신 유연한 단위를 쓰자 정보
CSS 픽셀 단위 고정 대신 유연한 단위를 쓰자본문
html {
font-size: 16px; /* 기준 rem 크기 */
}
h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem); /* 최소, 중간, 최대 */
}
p {
font-size: clamp(1rem, 2vw, 1.25rem);
}
.container {
width: min(90%, 1200px); /* 화면 90% or 최대 1200px */
margin: 0 auto;
}
img {
max-width: 100%; /* 이미지 깨짐 방지 */
height: auto;
}
px → rem, %, vw 로 변경
clamp()로 반응형 폰트 크기 설정
min()으로 가로폭 제어
추천
5
5
댓글 1개
저희도 근래는 픽셀 대신 사용하고 있네요. 정리 감사합니다!!! ^^