미디어쿼리

미디어쿼리

뷰포트의 해상도에 따라 CSS를 분기시키는 미디이쿼리는 반응형 프로젝트에서 반드시 필요한 기법이다.

---

&lt link~media="">

&lt ink rel="stylesheet" type="text/css" media="all and (min-width: 1000px)" href="style_pc.css">
최소 가로폭이 1000px보다 넓은 해상도일 때 style_pc.css를 연결 한다는 뜻

모바일 기기	가로	세로
iPhone X	375	812
iPhone 6,7,8	375	667
iPhone 5	320	568
Galaxy S5,S8	360	640
Galaxy Note 8	360	640
Galaxy	414	736
iPad Pro	1024	1366
:	:	:

---

@media

@media all and (min-width : 1000px) { 모든 기기에서 해상도가 최소 1000px 인 경우 적용할 속성들...}
처음 로딩할 때 성능이 저하되지 않도록 CSS 파일을 하나로 만들어서 CSS내부에서 조건에 따라 분시기시는 것이 일반적인 형태의 반응형웹 CSS 입니다.
body {color : red; }
@media only screen and (mex-width : 768px){
body {color : blue;}
}
=>이 구문은 원래 글자색이 빨간색인데, 화면이 768px 보다 작아졌을 때는 파란색으로 지정한다는 뜻이므로 pc에서는 글자 색상이 빨간색으로, 모바일에서는 파란색으로 나타난다.
=>color 를 반대로 쓰고 max->min 으로 바꾸면 원래 글자는 파란색인데 768px보다 커지면 글자색을 빨간색으로 지정한다.
@media only screen and (orientation : portrait){
body {background : skyblue;}
}
=> 모바일 기기를 세워 세로가 가로보다 긴 세로방향이 되면 배경색을 하늘색으로 지정한다는 뜻.
=> orientation : landscape 로 background : lightgreen; 으로 바꾸면 모바일 기기를 눕히면 배경색이 연두색으로 바뀐다.
@media screen and (mex - width : 900px) and (min - width : 600px), (min - width : 1100px){
body {color : red;}
}
=> 가로가 600px에서 900px 사이일 때, 그리고 1100px 이상일 때 에만 글자색을 빨간색으로 한다는 뜻.

Media Type	설명
all	모든 미디어 장치에 사용(기본값)
print	프린터에 사용
screen	PC, 태블릿, 스마트폰에 사용
speech	스크린리더기가 페이지를 읽는데 사용

---

---

예제

&lt!DOCTYPE html>
 &lthtml lang="ko">
&lthead>
    &ltmeta charset="UTF-8">
    &lttitle>오르셰미술관&lttitle>
    &ltstyle type="text/css"> 
    &lt/style>
&lthead>
&ltbody>
    &ltdiv class="wrap">
        &ltheader>
            &lth1>Musee d'Orsay&lt/h1>
        &lt/header>
        &ltdiv id="container" class="clear">
            &ltdiv class="1nb">
                &ltul>
                    &ltli> &lta href="#">작가의 작품 &lt/a> &lt/li>
                    &ltli> &lta href="#">작가의 시대 &lt/a> &lt/li>
                    &ltli> &lta href="#">작가의 일생 &lt/a> &lt/li>
                &lt/ul>
            &lt/div>
            &ltdiv class="content">
                &lth2>PICTURES&lt/h2>
                &ltp>&lta href="#">피리부는 소년&lt/a> &ltbr>&lta href="#">고흐의 방&lt/a&ltbr>&lta href="#">
                황색 그리스도가 있는 화가의 자화상&lt/a>&lt/br>&lta href="#">오페라좌의 관현악단&lt/a>&ltbr>&lta href="#">만종
                &lt/a>&ltbr>&lta href="#">제비꽃 장식을 단 베르트모리조&lt/a>&lt/br>&lta href="#">피리부는 소년&lt/a>&ltbr>&lta
                href="#">고흐의 방&lt/a>&ltbr>&lta href="#">황색 그리스도가 있는 화가의 자화상&lt/a>&ltbr>&lta href="#">오페라좌의
                관현악단&lt/a>&ltbr>&lta href="#">만종&lt/a>&ltbr>&lta href="#">제비꽆 장식을 단 베르트모리조&lt/a>&ltbr>
            &lt/div
            &ltdiv class="aside">
                &ltul class="ext">
                    &ltli>&lth2>Workshop Go&lt/h2>&lta href="#">Life drawing workshop&lt/a>&lt/li>
                    &ltli>&lth2>Summer Exhibition&lt/h2
                        &lta href="#">A-1evel Summer Exibition Online 2010&lt/a>&lt/li>
                    &ltli>&lth2>RA Collection&lt/h2>&lta href="#">RA Collections&lt/li>
                &lt/ul>
            &lt/div>
        &lt/div>
        &ltfooter>
            &ltp>$copy ;2018 Les Amis du Musee d'Orsay. All rights reserved. &lt/p>
        &lt/footer> 
    &lt/div>   
&lt/body>
&lt/html>

결과

---

media query를 흉내내는 script

function initLayout(){
var widthWin = $(window).width();
if (widthWin &lt 1000) $(;'body').addClass('mob').removeClass('pc');
else $('body').removeclass('mob').addClass('pc');
}
창의 가로 크기를 재고 1000px 보다 좁으면 body 에 mob 클래스를 붙이고 pc클래스는 제거하고, 1000px 이상이면 body 에 pc 클래스를 붙이고, mob 클래스는 제거한다는 뜻이다.
$(window).resiza(function() {
initLayout();
});
미리 만들어둔 스크립트를 창 크기가 바뀔 때마다 실행합니다.
...
body.mob {max-width : 720px}
...
css에서 body.mob에 속성을 추가하면 모바일일 때의 속성이 등록된다.