>웹 프론트엔드 >JS 튜토리얼 >브라우저의 크기에 따라 웹페이지의 텍스트 크기를 실시간으로 동적으로 변경하는 JS 방식 window_javascript 기술

브라우저의 크기에 따라 웹페이지의 텍스트 크기를 실시간으로 동적으로 변경하는 JS 방식 window_javascript 기술

WBOY
WBOY원래의
2016-05-16 15:13:451108검색

이 기사의 예에서는 JS가 브라우저 창의 크기에 따라 웹페이지의 텍스트 크기를 실시간으로 동적으로 변경하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

현재 CSS3의 나머지 부분은 우리의 모바일 개발에 전례 없는 변화를 가져왔고 우리의 개발을 더 쉽게 만들고 많은 장치와 더 잘 호환되게 만들었습니다. 그러나 이 기사의 초점은 js를 사용하여 변경하는 방법에 중점을 두지 않습니다. 웹페이지 텍스트의 실시간 크기.

코드는 다음과 같습니다.

<script>
 /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */
 function placeholderPic(){
  var w = document.documentElement.offsetWidth;
  document.documentElement.style.fontSize=w/20+'px';
 }
 placeholderPic();
 window.onresize=function(){
  placeholderPic();
 }
</script>

PS: 매우 강력한 기능을 갖춘 사용하기 쉬운 JavaScript 압축, 형식 지정 및 암호화 도구를 추천합니다.

JavaScript 압축/포맷/암호화 도구: http://tools.jb51.net/code/jscompress

위 js 도구의 암호화 기능은 js 코드의 평가 함수 암호화 형식을 구현할 수 있습니다. 이와 관련하여 이 사이트에서는 매우 강력하고 평가 기능 암호화를 위한 다음과 같은 암호 해독 도구도 제공합니다. 현실적인!

JS 평가 방법 온라인 암호화 및 복호화 도구: http://tools.jb51.net/password/evalencode

더 많은 JavaScript 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다: "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 특수 효과 및 기술 요약 ", "JavaScript 오류 및 디버깅 기술 요약", "JavaScript 데이터 구조 및 알고리즘 기술 요약", "JavaScript 순회 알고리즘 및 기술 요약" 및 "JavaScript 수학 연산 사용법 요약

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.