반응형 사이트 만들기(반응형 속성 추가) 자바스크립트

function responsiveImg(){

    var width = document.documentElement.offsetWidth;

//var width = $(window).width()

    var sizeMode = width > 1440 ? 4

: width > 1023 ? 3

: width > 767 ? 2

:              1;

//var sizeMode = width > 1440 ? 4 : width > 1023 ? 3 : width > 767 ? 2 : 1;

document.documentElement.className +=

(' s'+ sizeMode + (360 > width ? ' s0' : '')) ;

    if(sizeMode == 4){

        globalLayout = 'desktop';

    }else if(sizeMode == 3){

        globalLayout = 'laptop';

    }else if(sizeMode == 2){

        globalLayout = 'tablet';

    }else{

        globalLayout = 'mobile';

    }

    $('.responsive-image').each(function(){

        $(this).attr('src', $(this).attr('data-media-' + globalLayout));

    });

}

$(window).on('resize load', function(){

    responsiveImg();

});

< responsiveImg(); 함수 >

삼항연산자(이중삼항연산자) 사용 (조건이 만족하면 전자를 출력, 아니라면 후자 출력)

ㄴ변수 sizeMode의 조건 

1. 조건 (width가 1440 이상인가)를 실행 -> if 랑 같은 의미

만족하면 4를 출력 아니라면,   

2. 조건 (width가 1023 이상인가)를 실행 -> else if 랑 같은 의미

만족하면 3을 출력 아니라면,

3. 조건(width가 767 이상인가)를 실행

만족하면 2를 출력 아니라면 1을 출력

변수 sizeMode는 각각의 값에 따라 반응형 사이즈를 가짐

윈도우 창이 로드되고, 리사이징 될 때마다 responsiveImg(); 함수 실행

*삼성 글로벌 common.js 참고