Home Ads

[CSS] 미디어쿼리



미디어쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나입니다. (IE9 이상)


@media [only 또는 not] [미디어유형] [and또는 ,콤마] (조건문) {실행문}


@media (min-width:320px) {실행문}

=> width값이 320px 이상일 때 실행문을 실행


@media (min-width:320px) and (max-width:768px) {실행문}

=> width값이 320px 이상이고 768px 이하일 때 실행문을 실해



min/max(접두사 구문): min은 최소, 즉 이상이라는 의미고 있고, max는 최대, 즉 이하라는 의미




※주의사항

-  띄어쓰기 주의. ~and (min-width:320px) {}
-  min/max 사용 시 작성 순서 주의하기.
    min을 사용할 때는 반드시 크기가 작은 순서대로 작성해야 하고, 
    max를 사용할때는 반드시 크기가 큰 순서대로 작성.


[CSS] 미디어쿼리 [CSS] 미디어쿼리 Reviewed by 코알라 on 9월 20, 2018 Rating: 5

댓글 없음:

페이지

Powered by Blogger.