Javascript em根据窗口/视口尺寸调整大小，不影响文档样式的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);
  }
}

您可以根据屏幕大小手动给予。只需查看不同的屏幕大小，然后手动添加字体大小。