미디어쿼리의 기초적인걸 공부하다가 질문이 있습니다.

조회수 51회
.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) 설계 모범 사례에 관한 것입니다. 지금 취하신 접근법은 말하자면 분기점을 기준으로 완전히 영역을 나누자는 것일 텐데요.

    1. 0 ~ 99.9999... 픽셀일 때
    2. 100 ~ 599.9999.... 픽셀일 때
    3. 600 ~ 767.9999.... 픽셀일 때
    4. 그 이상

    근데 보통은 위와 같이 분기점을 가르지 않고 아래와 같이 분기점을 가릅니다.

    1. 기본값
    2. 화면이 100픽셀 이상일 때
    3. 화면이 600픽셀 이상일 때
    4. 화면이 768픽셀 이상일 때

    핵심은, 기본값(아무리 좁은 너비의 기기에서라도 일단 기본적으로 적용할 규칙)을 잡아 놓고, 점점 더 큰 화면용 규칙을 만들어나간다는 겁니다. 이렇게 일방향으로 규칙을 캐스캐이딩 하면, 확실히 질문자님이 마주치고 계신 문제 ― 767픽셀과 768픽셀 사이의 너비에서 발생하는 충돌 ― 은 해결이 됩니다. 게다가, '기본값'을 정의할 수 있어서 여러모로 안전하구요.

    비슷한 스택오버플로 질답에 모범 사례가 하나 나와 있으니 잘 참고해 보세요.

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.