미디어 쿼리 충돌

Question

나는 미디어

를 쿼리 아래 사용이 장치

1. 삼성 탭 (600 × 1024)
2. 아이 패드 (X 1024 768)

에 반응 내 사이트를 만들려고 노력하고 있어요

@media only screen and (min-device-width : 600px) and (max-device-width : 1024px) and (orientation : portrait){ } 

및

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){ } 

하지만 삼성 탭에 내 사이트를 개방하고있는 동안 그 아이 패드의 미디어 쿼리 스타일 나는이를 위해 무엇을 할 수

을 적용?

Answer 1

미디어 쿼리에서 중복되는 것을 방지해야합니다. 어떤 기기인지, 어떤 화면 크기인지는 생각하지 마십시오. 과 같이, 하나에 600-767 픽셀을 대상, 또 다른에서 768-1024 :

삼성 탭을 세로

@media only screen and (min-device-width : 600px) and (max-device-width : 767px) 

삼성 탭의 풍경과 아이 패드에서 두

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)