nme.kr

추적:
현재 위치: index » html » 소스_창고

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
html:소스_창고 [2023/07/19 22:19]
clayeryan@gmail.com [버튼식 메뉴 감추기] 		html:소스_창고 [2023/10/27 02:00] (현재)
clayeryan@gmail.com [반응형 웹페이지 폰트사이즈]
줄 58: 줄 58:
   </table>   </table>
 </code> </code>
 +
 +==== 반응형 웹페이지 폰트사이즈 ====
 +
 +  * HTML - head - style
 +
 +<code>
 +<meta name="viewport" content="width=device-width, initial-scale=1>
 +  <style>
 +    /* 801px ~ */
 +    * { color: black; }
 + 
 +    /* ~ 800px */
 +    @media screen and (max-width: 800px) {
 +      * { font-size: 72.5%;}
 +    }
 +
 +    /* ~ 480px */
 +    @media screen and (max-width: 480px) {
 +      * { font-size: 2.8vw; }
 +    } 
 +    <style>
 +
 +</code>
 +
 +==== 기기별 가로폭 사이즈 ====
 +
 +<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) {
 +}
 +</code>
 +
 +<hi #fff200>나의 단말기 디바이스사이즈 확인하기</hi>
 +http://sunpig.com/martin/code/2012/androidzoom/devicewidth.html
 +
 +
 +
  
마지막으로 수정됨: 2023/07/19 22:19
CC Attribution-Share Alike 4.0 International 별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International