javascript - 当检测到某个最小屏幕分辨率大小时，如何通过 Javascript 更改 CSS 属性

Question

我有这个代码:

function AUTADIV () {
  var BRW = window.outerWidth;
  x = (BRW/1280) * 20
  document.getElementsByTagName("a").style.fontSize = x
}

和标签 <a>已经在 .css 文件中的此类下:

a { 
   position:relative;
   z-index:1; 
   color:White; 
   background-color: transparent;
   font-size:20pt;
   text-decoration: none;
   text-shadow: blue 0em 0em 0.4em 
}

当屏幕较大的人看到我的网站时，背景确实填满了所有内容，但字体太小了。有什么办法让它自动调整大小吗？如果没有，我该如何更改 font-size:20pt通过 JavaScript？我的代码只有在 font-size 样式是内联的情况下才有效，我需要在 CSS 脚本中使用它。

我发现我需要的代码用 onResize 激活事件。

Answer 1

如果它需要在 CSS 中，那么它可能很难做到。但是，如果可以使用 JS 动态更改它，那么您可以通过一个简单的测试来完成此操作，例如:

(我正在使用 jquery)

$.getDocHeight = function(){
    return Math.max(
        $(document).width(),
        $(window).width(),
        /* For opera: */
        document.documentElement.clientWidth
    );
};
if($.getDocHeight>threshhold){ // some threshhold of a max width
    $('a').style('font-size','40pt');
}

这也可以在常规 js 中完成。很难确定所有不同浏览器的宽度，这就是我包含该功能的原因。但是一旦你有了宽度，你只需要做一个简单的检查，你就可以为你的 anchor 标记增加字体大小样式。我建议使用静态大小，这样字体更易于预测，并且不会随着页面大小而缩放。

在考虑不同类型的用户时，这是一个最佳实践(例如移动用户，您绝对不希望字体太小以至于所有内容都适合一个页面)。

代码来源:http://james.padolsey.com/javascript/get-document-height-cross-browser/