PC에서도 모바일처럼 알맞은 크기로 출력하는 방법

PC에서도 모바일처럼 알맞은 크기로 출력하는 방법

QA

PC에서도 모바일처럼 알맞은 크기로 출력하는 방법

답변 1

본문

현재 작업중인 사이트가 PC,모바일 따로이긴한데, PC기능을 닫아버리고

모바일웹으로만 동작하도록 해놓았습니다.

 

그래서, PC에서도 접속하면 모바일화면으로 보여지는데,

양쪽으로 화면을 꽉 채우다 보니까, 게시판들도 다 틀어지고 보기도 좀 불편하더라구요.

 

http://sir.kr/qa/136034

[▲ fm25님이 답변해주신, 관련질문글]

 

검색을 통해서 위의 글을 참고하여, 민트테마를 다운받고, 살펴보았는데

어떤부분이 PC에서의 화면을 모바일처럼 고정시켜주는 기능인지를 모르겠네요...

 

참고로, 해당 질문자분께서는 head.sub 부분을 건드리셨다는데

그쪽도 많이 살펴보았지만, 감을 잡지 못했습니다..

 


/* 중간 레이아웃 */
#wrapper {background:#eee;width:100%;}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#container {position:relative;max-width:800px;margin:0px auto;z-index:1;padding:20px}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {margin:0 0px 10px;font-size:1.2em;font-weight:bold;text-align:center;border-bottom:2px solid #ddd;padding-bottom:20px;}

 

[▲ 민트테마 / mobile.css / 86번줄-92번줄]

 


/* 중간 레이아웃 */
#wrapper {z-index:5;margin:0 auto;width:970px;border-right:1px solid #dde4e9;border-left:1px solid #dde4e9;zoom:1}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#aside {float:right;margin:0 0 0 -1px;width:210px;border-left:1px solid #dde4e9;background:#fff}
#container {z-index:4;position:relative;float:left;padding:15px 16px 15px 15px;width:728px;min-height:500px;height:auto !important;height:500px;border-right:1px solid #dde4e9;background:#fff;font-size:1em;zoom:1}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {margin-bottom:20px;font-size:1.2em;font-weight:bold}

 

[▲ 민트테마 / default.css / 83번줄-91번줄]

 

위의 코드표에서 mobile.css의 3번째줄에 있는 container부분 'max-width:800px'

또는 default.css의 5번째줄에 있는 container부분 'max-width:728px' 

 

제 미천한 실력에서는 해당부분이 짐작되어져 제가 작업중인 모바일사이트의

mobile.css에 container부분을 800px로 수정해보았는데, 말그대로 중간 레이아웃만 줄었습니다.

이런식으로 상단, 하단 전부 각각 해당값을 입력하여 줄여줘야 하는건가요?

 

민트테마의 경우 800px 또는 728px로 폴더 전체를 검색해봐도 설정된값이 저것 말고는 검색되지 않는데,

반응형이라 그런건지, 아니면 해당코드가 아닌 다른값에서 조정을 해야하는데 제가 잘못짚은건지 모르겠네요.

 

최대한 상황과 제가 해본 방법을 적는다는게 적다보니까 너무 많이 적은 것 같습니다.

글이 길지만 답변을 위해서 읽어주신분들께 감사드립니다.

 

이 질문에 댓글 쓰기 :

답변 1

#wrapper {background:#eee;width:100%;} 

요기만 max-width 주면 될 듯한데요?

답변을 작성하시기 전에 로그인 해주세요.
전체 1
© SIRSOFT
현재 페이지 제일 처음으로