javascript - 基于窗口/视口尺寸的Javascript em调整大小不影响文档内样式文本/ 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);
  }
}

您可以根据屏幕的屏幕尺寸手动给它。只需查看不同的屏幕尺寸并手动添加字体大小。