미디어쿼리 질문합니다. 채택완료
컴공학생김탁구
6년 전
조회 2,209
안녕하세요
아이폰 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개
채택된 답변
+20 포인트
6년 전
max는 그 이하일때, min은 그 이상일때. 입니다.
위에 말씀주신 @media (min-width: 700px) and (max-width: 760px) { } 은
700px 보다 크고 760px 보다 작을때 입니다.
사이즈가 가장 큰것부터 max-width 만 써서
나열해보시면 답이 나올것 같습니다~
두번째 말씀주신것으로 만들어보면 이렇습니다.
</p>
<p>@media (max-width: 1125px) {</p>
<p> // 가로사이즈가 <span style="color:#e74c3c;">1125px 이하</span>일때 (X, Xs)</p>
<p>}</p>
<p>@media (max-width: 828px) {</p>
<p> // 가로사이즈가 <span style="color:#e74c3c;">828px 이하</span>일때 (Xr)</p>
<p>}</p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인