javascript - in-docスタイルのテキスト/cssに影響を与えないウィンドウ/ビューポートの寸法に基づくJavascript emのサイズ変更?

Question

以下を使用して、ブラウザーのサイズに基づいてテキスト (およびその他の要素) のサイズを変更しています。

(function(w){
   var run = w.onresize = function(){
    document.body.style.fontSize=window.innerWidth*.009536+"px"
   }
   run();
})(window);

ただし、次の範囲内では何にも影響しません。

<style type="text/css">
.search-sprite
{
background-image: url(../../images/searchsprite.png);
height: 2.46em;
cursor: pointer;
background-repeat:no-repeat;
}

.search-sprite:hover {
background-position: 0px -2.46em;   
}
</style>

なんで？どうすれば修正できますか？

Answer 1

@media screen and (max-device-width : 320px)
{
  body or yourdiv element
  {
    font:size(px/em/cm);
  }
}
@media screen and (max-device-width : 1024px)
{
  body or yourdiv element
  {
    font:size(px/em/cm);
  }
}

画面の画面サイズに応じて手動で与えることができます。別の画面サイズを見て、フォントサイズを手動で追加するだけです。