서로 덮어쓰기 CSS 미디어 쿼리

서로 덮어쓰기 CSS 미디어 쿼리

Stack Overflow 지원 감사합니다.디자인을 강화하기 위해 사용하는 커스텀 CSS가 있습니다.아이폰6에 대한 미디어 쿼리 중 하나를 변경하면 아이폰5와 같은 다른 기기에 영향을 주는 문제가 계속 발생하고 있습니다.끝이 보이지 않는 상태에서 끊임없이 적응하고 있다는 것이 문제가 되었습니다.사용하고 있는 @media 브레이크 포인트는 다음과 같습니다.

/* IPHONE 6 PLUS */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 

}

/* IPHONE 6 */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation : portrait) { 

}
/* IPHONE 5s */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {

}

/* IPAD LAYOUTS */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
     } 


/* IPAD LANDSCAPE */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

어떤 도움도 크게 도움이 될 것이다.

Birdman의 의견에 동의하며 모바일 우선 접근 방식을 고려해야 합니다.단, 모바일 우선은 최소 디바이스 크기가 미디어 쿼리에서 완전히 벗어난다는 것을 의미합니다.다음 크기를 올리면 첫 번째 미디어 쿼리가 시작됩니다.최소 너비만 있으면 됩니다.이러한 새로운 스타일은 기본 스타일과 함께 덮어쓰지 않습니다.작성된 각 미디어 쿼리는 이미 호출된 쿼리와 계속 결합됩니다.

그리고 아이패드나 태블릿을 걱정하는 대신...디자인 요소가 나빠지기 시작할 때를 걱정합니다.모든 주요 브라우저에는 다양한 디바이스 크기로 테스트할 수 있는 지능형 에뮬레이터가 있습니다.

여기 장점과 단점에 대한 좋은 기사가 있다.항상 모바일을 먼저 코드화하고 스타일 충돌은 일부러 하지 않는 한 걱정하지 않습니다.

https://codemyviews.com/blog/mobilefirst

장치 너비가 미디어 쿼리의 범위 사이에 있으면 스타일링이 적용됩니다.따라서 디바이스의 폭이 500px인 경우 먼저 6plus 스타일링을 가지며, 그 다음 6plus 스타일링과 5s 스타일링에 의해 우선됩니다.통상, CSS를 특정의 디바이스에 맞추어 커스터마이즈 하는 것은 추천하지 않습니다만, 커스터마이즈 하는 경우는, 어느 쪽의 스타일에도 겹치는 범위가 없는 것을 확인할 필요가 있습니다.

언급URL : https://stackoverflow.com/questions/33873790/css-media-queries-overriding-each-other