두개의 css중에 desktop는 pc용이고 mobile는 모바일입니다. 

desktop에 정의된 미디어쿼릴르 보면 768이상인경우는 해당 css를 참고를 하도록 처리가 되어있습니다. 

일단 저희쪽에서 살펴보기에는 정상적으로 동작을 하고 있는것 같습니다. 

 

<div class="aaa">안녕하세요</div>

이와 같은 내용이 있는데 이것을 모바일쪽이랑 PC쪽에 다르게 표시를 할려면 각 css에다가 정의를 다르게 해야됩니다. 

 

desktop.css에서 .aaa {PC용 화면 정의}
mobile.css에서도 .aaa{모바일 화면 정의}

 

이렇게 구성이 되는거죠..그럼 창의 해상도에 따라서 css를 다르게 호출을 하여 해당 css를 불러오도록 처리를 합니다. 

 

단, 여기서 mobile.css의 경우는 desktop.css에 내용이 정의가 되어있지 않으면 자동으로 mobile쪽을 호출을 합니다 

 

따라서 만약 PC용 구성이랑 모바일 구성이 다른경우는 반드시 두군데 다 기재를 하시면 정상적으로 처리가 됩니다..

 

각 css에 내용을 살펴보니 mobile쪽에는 spot에 대해서 display:none 라고만 정의를 해 놓으셨습니다. 

 

그래서 spot에 대한 내역은 모바일에서 노출이 되고 있지 않고 있습니다. 

 

감사합니다. 

 

 

 

답변 드리겠습니다.

우선 반응형 웹에 은 단순히 미디어 쿼리로 분기 설정만 해서 되는게 아니라는 점 유념하시구요(반응형에 대한 이론은 직접 찾아 보시는걸 권장 드립니다.)

반응형의 기본 설정을 하기 위해서는 반드시 DOCTYPE(문서 유형) 을 HTML5 에 맞게끔 선언 해주셔야 되구요 , 

위내용만 봤을때는 단순히 스크린만 구분짓는 행위가 되기 때문에 PC 버전만 적용이 되는 것 입니다.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes"/>

메타 타입도 같이 선언 해주셔야 모바일을 고려한 모든 스크린에서 스타일이 동작을 합니다.

미디어의 유형은 screen(컴퓨터 스크린), handheld(스마트 폰을 제외한 손에 들고 다니는 장치를 뜻함) 을 선언 하시면 당연히 스마트 폰은 적용이 안되는 것이구요 

통상적으로 all을 사용 합니다. 자세한건 자료를 찾아 보시는게 이해하시는데 도움이 되실 겁니다. 

결론적으로 독타입 선택에서 html5 로 선언 하시고

헤어타입에  아래와 같은

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes"/>

<link rel="stylesheet" href="/img_up/shop_pds/testing1111/src_css/mobile.css" type="text/css" media="all" />

<link rel="stylesheet" href="/img_up/shop_pds/testing1111/src_css/desktop.css" type="text/css" media="only all and (min-width : 768px)"/>

기본 적용 설정값이 주어져야 반응형 웹의 기본 설정이 되는 것 입니다.

수정처리를 해놓았으니 지금은 정상 작동 하실껍니다.

참고 하시고 미디어쿼리뿐만 아니라 반응형 웹의 동작 원리를 알아 두시면 구현 하시는데 많은 도움이 되실 듯 합니다.

감사합니다.