문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판 이전 판 | |||
html:소스_창고 [2023/10/27 01:56] clayeryan@gmail.com [버튼식 메뉴 감추기] |
html:소스_창고 [2023/10/27 02:00] (현재) clayeryan@gmail.com [반응형 웹페이지 폰트사이즈] |
||
---|---|---|---|
줄 81: | 줄 81: | ||
</ | </ | ||
+ | |||
+ | ==== 기기별 가로폭 사이즈 ==== | ||
+ | |||
+ | <code java> | ||
+ | /* 스마트폰 가로+세로 */ | ||
+ | @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ | ||
+ | } | ||
+ | /* 스마트폰 가로 */ | ||
+ | @media only screen and (min-width : 321px) { | ||
+ | } | ||
+ | /* 스마트폰 세로 */ | ||
+ | @media only screen and (max-width : 320px) { | ||
+ | } | ||
+ | /* iPhone4와 같은 높은 해상도 세로 */ | ||
+ | @media | ||
+ | only screen and (-webkit-min-device-pixel-ratio : 1.5), | ||
+ | only screen and (min-device-pixel-ratio : 1.5) { | ||
+ | } | ||
+ | /* iPhone4와 같은 높은 해상도 가로 */ | ||
+ | @media only screen and (min-width : 640px) { | ||
+ | } | ||
+ | /* iPad 가로+세로 */ | ||
+ | @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { | ||
+ | } | ||
+ | /* iPad 가로 */ | ||
+ | @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { | ||
+ | } | ||
+ | /* iPad 세로 */ | ||
+ | @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { | ||
+ | } | ||
+ | /* 데스크탑 브라우저 가로 */ | ||
+ | |||
+ | @media only screen and (min-width : 1224px) { | ||
+ | |||
+ | } | ||
+ | /* 큰 모니터 */ | ||
+ | @media only screen and (min-width : 1824px) { | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <hi # | ||
+ | http:// | ||
+ | |||
+ | |||
+ | |||
+ |