모바일 웹 사이트 글꼴 크기 조정 및 줄이기

Question

몇 줄의 텍스트가있는 간단한 정적 웹 사이트가 있습니다.

모바일 장치에서만 액세스 할 수 있으며 텍스트의 글꼴 크기는 화면 높이의 1/3이되고 화면 너비에 따라 줄 바꿈이 이루어지기를 바랍니다.

CSS & HTML 만 사용하여 수행 할 수 있습니까? 그렇다면 어떻게?

감사

Answer 1

간단한 대답 프로그래밍 이동기에 기초하여 스타일 시트를 제공하는 것이다. 당신은 당신의 CSS 파일에이 작업을 수행 할 수 있습니다

@media screen and (max-device-width: 480px) { 
    font-size: 160px; /* 1/3 max screen height */ 
} 

다른 방법으로, 당신은 뷰포트의 폭과 높이를 동적으로 스타일을 설정 계산하기 위해 자바 스크립트를 사용할 수 있습니다.

window.onload = function() { 
    var viewportwidth; 
    var viewportheight; 

    if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerWidth, 
     viewportheight = window.innerHeight 
    } else if (typeof document.documentElement != 'undefined' 
    && typeof document.documentElement.clientWidth != 
    'undefined' && document.documentElement.clientWidth != 0) { 
     viewportwidth = document.documentElement.clientWidth, 
     viewportheight = document.documentElement.clientHeight 
    } else { 
     viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
     viewportheight = document.getElementsByTagName('body')[0].clientHeight 
    } 
    document.body.style.fontSize = viewportheight/3; 
} 

설정 white-space: normal와 CSS의 wordwrapping하고, 원하는 경우, word-wrap:break-word