미디어쿼리의 기초적인걸 공부하다가 질문이 있습니다.
조회수 369회
.pc{
color: red;
font-size: 50px;
background-color: pink;
}
@media (min-width: 600px) and (max-width: 767px) {
.pc {
color: blue;
font-size: 20px;
background-color: yellow;
}
}
@media (min-width: 100px) and (max-width: 599px) {
.pc {
color: green;
font-size: 10px;
background-color: gray;
}
}
이렇게 해서 사이트창을 늘렸다가 , 줄였다가 할때
599.??? 이렇게 599. 소수점 부분에선
원래 지정했던 red에 pink값으로 잠깐 돌아가는데,
크게 신경안쓰거나 이렇게 작성을 하진않겠지만
저 599.소수점 부분을 없애거나 깔끔하게 연결되는 해결법이 궁금합니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
묻고 계신 것은 미디어쿼리 분기점(breakpoints) 설계 모범 사례에 관한 것입니다. 지금 취하신 접근법은 말하자면 분기점을 기준으로 완전히 영역을 나누자는 것일 텐데요.
- 0 ~ 99.9999... 픽셀일 때
- 100 ~ 599.9999.... 픽셀일 때
- 600 ~ 767.9999.... 픽셀일 때
- 그 이상
근데 보통은 위와 같이 분기점을 가르지 않고 아래와 같이 분기점을 가릅니다.
- 기본값
- 화면이 100픽셀 이상일 때
- 화면이 600픽셀 이상일 때
- 화면이 768픽셀 이상일 때
핵심은, 기본값(아무리 좁은 너비의 기기에서라도 일단 기본적으로 적용할 규칙)을 잡아 놓고, 점점 더 큰 화면용 규칙을 만들어나간다는 겁니다. 이렇게 일방향으로 규칙을 캐스캐이딩 하면, 확실히 질문자님이 마주치고 계신 문제 ― 767픽셀과 768픽셀 사이의 너비에서 발생하는 충돌 ― 은 해결이 됩니다. 게다가, '기본값'을 정의할 수 있어서 여러모로 안전하구요.
비슷한 스택오버플로 질답에 모범 사례가 하나 나와 있으니 잘 참고해 보세요.
댓글 입력