미디어 쿼리 질문합니다.
본문
제가 아래와 같이 미디어 쿼리를 만들었습니다.
인터넷 해당도를 참고해서 만들었는데
모든 아이폰이 맨마지막에 미디어쿼리만 타버립니다.
@media only screen and (min-device-width : 375px) and (max-device-width: 667px) and (orientation : portrait) {
/* iPhone 6, 6s, 7, 8 */
}
@media only screen and (min-device-width : 414px) and (max-device-width: 736px) and (orientation : portrait) {
/* iPhone 6+, 6s+, 7+, 8+ */
}
@media only screen and (min-device-width : 375px) and (max-device-width: 812px) and (orientation : portrait) {
/* iPhone X */
}
@media only screen and (min-device-width : 375px) and (max-device-width : 896px) and (orientation : portrait) {
/* iPhone XS */
}
https://www.thewordcracker.com/miscellaneous/media-query-for-mobile-devices-such-as-iphone-nad-ipad/
이사이트를 보고했는데, 맨마지막에 xs 미디어쿼리만 타버리는데 왜 그러는건가요?
답변 2
만약 넚이가 600px이면 모두 적용되는데
맨 막지막에 있는 것이 크기에 맞다면 중복된 스타일은 재정의 되어 마지막에 것이 적용됩니다.
재정의 안된 것은 앞에 있는 스타일이 적용되겠죠
조건이 375px~896px 사이의 크기일때 적용이니 당연히 그 사이의 크기들도 적용이 안되는게 맞습니다
min-width을 빼시고 max-width설정만 하셔야 할듯 하네요
max-device-width만 설정해도다 공통적으로 먹힙니다 ㅠㅠ
왜그런지모르겟습니다~ 혹시 오타라도 있는건가요?
@media only screen and (max-device-width: 667px) and (orientation : portrait) {
/* iPhone 6, 6s, 7, 8 */
}
@media only screen and (max-device-width: 736px) and (orientation : portrait) {
/* iPhone 6+, 6s+, 7+, 8+ */
}
@media only screen and (max-device-width: 812px) and (orientation : portrait) {
/* iPhone X */
}
@media only screen and (max-device-width : 896px) and (orientation : portrait) {
/* iPhone XS */
}
