미디어쿼리 예제 > 퍼블리셔팁

퍼블리셔팁

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

미디어쿼리 예제 정보

반응형 미디어쿼리 예제

본문

미디어쿼리 예제 

화면너비에 맞춰 다른 CSS 적용


@charset "utf-8";
/** 전체박스 */
#wrap {
    width: 80%;
    height: 600px;
    margin: 0 auto;
    border: 10px solid #ffff00;
}
/* min - 크기가 작은순서대로 작성, max - 크기가 큰순서대로 작성 */
/* all : 모든장치 (default) */
/* 너비가 320px 이상일때 */
@media all and (min-width:320px){
    #wrap {
        width: 40%;
        background: #000;
    }
}
/* 너비가 600px 이상일때 */
@media all and (min-width:600px){
    #wrap {
        width: 60%;
        background: #40b0f9;
    }
}
/* 너비가 1024px 이상일때 */
@media all and (min-width:1024px){
    #wrap {
        width: 90%;
        background: #f45750;
    }
}

 

추천
0

댓글 0개

전체 26
퍼블리셔팁 내용 검색 반응형에서

회원로그인

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