반응형을 위한 미디어쿼리 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

반응형을 위한 미디어쿼리 정보

반응형 반응형을 위한 미디어쿼리

본문

미디어 쿼리 규칙

@media only 매체유형 and (조건문) {실행문}

 

매체유형>

all 모든 매체에 사용함.
print 프린터 기기에 사용함.
screen 컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용함.
speech 웹 페이지를 읽어주는 스크린 리더(screenreader)에 사용함.

 

미디어쿼리 속성>

width 화면의 너비
height 화면의 높이
device-width 매체 화면의 너비
device-height 매체 화면의 높이
devie-aspect-ratio 매체 화면의 비율
orientation 매체 화면의 방향
color 매체의 색상 비트 수
color-index 매체에서 표현 가능한 색상의 개수
monochrome 흑백 매체에서의 픽셀당 비트 수
resolution 매체의 해상도

 

 

 

예시)

body { background-color: white; } @media screen and (min-width: 640px) and (max-width:1280px) { body { background-color: pink; } }

 

가로값이 640px 이상 1280px 이하일 경우 핑크색 배경으로 바뀌는걸 볼 수 있다.

 

비율로 주는법)

//세로 모드, 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행
@media all and (orientation:portrait){
   body{background:yellow}
}

//가로 모드, 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행
@media all and (orientation:landscape){
   body{background:yellow}
}
@media all and (aspect-ratio:5/4) { … } // 뷰포트 너비가 5, 높이가 4 비율이면 실행
@media all and (min-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이상이면 실행
@media all and (max-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이하면 실행

 

 

 

추천
2

댓글 1개

전체 1,230
퍼블리셔팁 내용 검색

회원로그인

진행중 포인트경매

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