화면 크기에 따라 웹 페이지를 바꿉니다.

Question

웹 사이트를 디자인하고 있습니다. 다양한 크기, 아이폰, ipad 등 다양한 크기의 스크린을 열길 원합니다. 사파리 브라우저에서 테스트하고 있습니다. 브라우저 크기를 변경하면 데이터 및 이미지가 그 크기에 따라 조정될 필요가 있습니다. 이를 위해 Liquid Layout을 사용했습니다. 그러나 단락을 퍼센트로 설정할 수 없습니다. 나는 그들도 시험해 보았다. 그래서, 나는 그것을 25px로 만들었습니다. 그래서, 여기에 문제가 내가 내 브라우저 크기를 변경할 때, 웹 페이지 내의 이미지가 더 크고 작지만 글꼴 크기가 일정한 크기에 따라 변경됩니다. 이 작업을 수행하는 방법?

미리 감사드립니다.

Answer 1

CSS에서 p { word-wrap: break-word; width: 100%; }을 시도하십시오.

마법은 word-wrap: break-word;입니다. 이것은 컨테이너를 높이로 채우지 만 폭은 유지합니다.

또한이 경우 font-size을 %으로 설정할 필요가 없지만 px을 사용할 수 있습니다.

http://jsfiddle.net/kQEM8/1/

편집 : 당신이 당신의 질문을 수정하기 때문에이 같은 것을 의미 했습니까? jsfiddle에서 실행 한 다음 브라우저의 크기를 조정하십시오.

http://jsfiddle.net/kQEM8/2/

window.onresize = function(event) { 
    document.getElementById('test').style.fontSize = (document.width * 0.1)+'px' 
}