미디어쿼리 질문합니다.
본문
안녕하세요
아이폰 6S, XS, XR 크기를 맞추려고 합니다.
우선 6S px 크기는 아래 캡쳐와 같습니다.
W PX 750 이더라구요
그래서 미디어 쿼리르 아래와 같이 만들었습니다.
@media (min-width: 700px) and (max-width: 760px) {
}
아이폰 X, XS, XR 픽셀 크기는 아래와 같습니다.
아래와 같이 가장 큰 width값이 1125px 가장 작은 width값이 828px입니다.
따라서 아래와 같이 만들었습니다.
@media (min-width: 828px) and (max-width: 1125px) { }
그런데 실행을 하면 모두 아이폰 6s 미디어쿼리만 타고있습니다. 무엇이 잘못된건가요?
제가 미디어쿼리를 제대로 이해를 못하는건지..ㅠ min-width 와 max-width를 잘못한건지 궁금합니다.
답변 1
max는 그 이하일때, min은 그 이상일때. 입니다.
위에 말씀주신 @media (min-width: 700px) and (max-width: 760px) { } 은
700px 보다 크고 760px 보다 작을때 입니다.
사이즈가 가장 큰것부터 max-width 만 써서
나열해보시면 답이 나올것 같습니다~
두번째 말씀주신것으로 만들어보면 이렇습니다.
@media (max-width: 1125px) {
// 가로사이즈가 1125px 이하일때 (X, Xs)
}
@media (max-width: 828px) {
// 가로사이즈가 828px 이하일때 (Xr)
}
답변을 작성하시기 전에 로그인 해주세요.
