Javascript em resize based on window/viewport dimension not affect in-doc style text/css?

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);
  }
}

可以根据屏幕大小手动给，看不同的屏幕大小，手动添加字体大小就可以了。