브라우저 크기에 따른 스타일시트 변경

by

resolutiondeplayouts.jpg
Chris Coyier씨는 브라우저의 창 크기에 따라 스타일시트를 로드하여 최적화된 레이아웃을 제공하는 방법에 대하여 작성했습니다. 위 데모는 윈도의 너비에 따라 3가지 스타일시트가 번갈아가며 실시간으로 적용합니다. 적용하는 방법은 다음과 같은 두 가지가 있습니다.

<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' /> 
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' /> 
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />

이 HTML 코드는 IE계열 브라우저를 제외한 브라우저에서 작동합니다. IE계열 브라우저까지 지원하기 위해서는 다음과 같은 자바스크립트(jQuery)를 이용해야 합니다.

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
        $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

avatar

captcha