미디어 쿼리가 서로 재정의합니다.

미디어 쿼리에 대한 일반적인 질문이 있습니다. 내가 일하고 사이트는 두 가지 반응 뷰포트 있습니다미디어 쿼리가 서로 재정의합니다.

CSS 문서에서 그 순서. 그들은 계단식이기 때문에 내 iPad 쿼리는 내 iPhone 쿼리를 계속 무시합니다 (반대의 경우도 마찬가지입니다).

간단한 해결책이 있습니까? 정말 확실한 것이 빠져있는 것처럼 보입니다.

2017-01-12 Liz H.

이것은 주문 때문입니다 (링크 : http://stackoverflow.com/questions/8790321/why-does-the-order-of-media-queries-matter-in-css). – Michael

최대 너비 미디어 쿼리를 사용하는 경우 순서는 최대 값에서 최소값이어야합니다. 반대의 경우는 최소 너비에 해당합니다.

이 중첩 된 레이아웃, 그것은 다음과 같이 보일 것이다 것 :

@media (max-width: 770px) { 
    .css-rule { 
    } 
} 

@media (max-width: 414px) { 
    .css-rule { 
    } 
}

당신은 또한 CSS가에 포함되어 있는지 확인합니다 아이 패드 크기에 최소 폭을 지정 시도 할 수 있습니다

그것은 다음과 같이 그 폭 이하로 발생하지 않습니다 :

@media (min-width: 415px) and (max-width:770px) {}

당신은 그들이 당신의 파일을 대체 할 수있다 외부 CSS 파일을로드하는 경우. 가장 중요한, 일반적으로 사용자 정의 CSS 파일을 마지막 파일로 저장하십시오.

미디어 쿼리에 대해 these guys을 확인하면 대개 무슨 일이 일어나는지 알 수 있습니다.

도움이 되었습니까?

2017-01-12 18:41:45

답변