ホームページ  >  記事  >  ウェブフロントエンド  >  ブラウザのウィンドウサイズに応じてWebページの文字サイズをリアルタイムに動的に変更するJSメソッド_javascriptスキル

ブラウザのウィンドウサイズに応じてWebページの文字サイズをリアルタイムに動的に変更するJSメソッド_javascriptスキル

WBOY
WBOYオリジナル
2016-05-16 15:13:451091ブラウズ

この記事の例では、JS がブラウザのウィンドウのサイズに応じて Web ページのテキスト サイズをリアルタイムで動的に変更する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

現在、CSS3 の変更によりモバイル開発に前例のない変化がもたらされ、開発が容易になり、多くのデバイスとの互換性が向上しましたが、この記事の焦点は、js を使用して変更する方法にはありません。 Web ページのテキストのサイズをリアルタイムで測定します。

コードは次のとおりです:

<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>

追記: ここでは、非常に強力な機能を備えた、非常に使いやすい JavaScript 圧縮、書式設定、暗号化ツールをお勧めします:

JavaScript 圧縮/フォーマット/暗号化ツール: http://tools.jb51.net/code/jscompress

上記の js ツールの暗号化関数は、js コードの eval 関数暗号化形式を実現できます。これに関して、このサイトでは、非常に強力で、eval 関数暗号化のための次の復号化ツールも提供しています。実用的!

JS eval メソッドのオンライン暗号化および復号化ツール: http://tools.jb51.net/password/evalencode

さらに JavaScript 関連のコンテンツに興味のある読者は、このサイトの特別トピックをチェックしてください: 「JavaScript 検索アルゴリズム技術の概要」、「JavaScript アニメーションの特殊効果と技術の概要」 "、"JavaScript エラーとデバッグ手法の概要"、"JavaScript データ構造とアルゴリズム手法の概要"、"JavaScript トラバーサル アルゴリズムと手法の概要」と「JavaScript 数学の操作方法の概要

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。