미디어쿼리 질문합니다.

미디어쿼리 질문합니다.

QA

미디어쿼리 질문합니다.

본문

안녕하세요

아이폰 6S, XS, XR   크기를 맞추려고 합니다.

 

우선 6S px 크기는 아래 캡쳐와 같습니다.

W PX 750 이더라구요 

그래서 미디어 쿼리르 아래와 같이 만들었습니다.

@media (min-width: 700px) and (max-width: 760px) { 
}

990290143_1559618549.3302.png

 

아이폰 X, XS, XR 픽셀 크기는 아래와 같습니다.

아래와 같이 가장 큰 width값이 1125px  가장 작은 width값이 828px입니다. 

따라서  아래와 같이 만들었습니다.

@media (min-width: 828px) and (max-width: 1125px) { }

990290143_1559618595.9257.png

 

그런데 실행을 하면 모두 아이폰 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)
}
답변을 작성하시기 전에 로그인 해주세요.
전체 54
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT