사용자:Lunaris/common.css: 두 판 사이의 차이
새 문서: →모바일에서 PC용 벡터 스킨을 볼 때 화면 깨짐 보정: @media screen and (max-width: 980px) { →본문 영역을 모바일 폭에 맞춤: #content { margin-left: 0 !important; padding: 1em !important; font-size: 110% !important; } →좌우 밀림을 방지하기 위해 가로스크롤 허용 및 박스 크기 고정: table, .mw-body, #bodyContent { max-width: 100% !important; box-sizing: border-... |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
/* | /* PC용 벡터 스킨을 모바일 가로 폭에 딱 맞추는 CSS */ | ||
@media screen and (max-width: 980px) { | @media screen and (max-width: 980px) { | ||
/* 본문 | /* 1. 전체 화면 좌우 여백 및 넘침 제거 */ | ||
html, body { | |||
max-width: 100% !important; | |||
overflow-x: hidden !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
/* 2. 본문 박스를 화면 가로 폭에 꽉 채우기 */ | |||
#content { | #content { | ||
margin-left: 0 !important; | margin-left: 0 !important; | ||
padding: | margin-right: 0 !important; | ||
padding: 10px !important; | |||
border-left: none !important; | |||
width: 100% !important; | |||
box-sizing: border-box !important; | |||
} | |||
/* 3. 왼쪽 사이드바 메뉴를 화면 맨 아래로 내리기 */ | |||
#mw-panel { | |||
position: relative !important; | |||
padding-top: 20px !important; | |||
width: 100% !important; | |||
margin-left: 10px !important; | |||
clear: both !important; | |||
} | |||
/* 4. 상단 헤더(검색창, 메뉴) 영역 압축 */ | |||
#mw-head { | |||
position: relative !important; | |||
width: 100% !important; | |||
} | |||
#left-navigation, #right-navigation { | |||
float: none !important; | |||
margin-left: 0 !important; | |||
} | } | ||
/* | |||
table, .mw- | /* 5. 가로로 긴 표(Table)나 설정창 강제 스크롤 처리 */ | ||
.mw-body-content table, pre, .mw-htmlform-matrix { | |||
display: block !important; | |||
max-width: 100% !important; | max-width: 100% !important; | ||
overflow-x: auto !important; | |||
white-space: nowrap; | |||
} | } | ||
/* | |||
/* 6. 배경 영역 정돈 */ | |||
display: | #mw-page-base, #mw-head-base { | ||
display: none !important; | |||
} | } | ||
} | } | ||