当检测到一定的最小屏幕分辨率大小时，如何通过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 
}

当屏幕较大的人看到我的网站时，背景会填满所有内容，但是字体太小。 有什么方法可以使其自动调整大小？ 如果没有，如何通过JavaScript更改font-size:20pt ？ 我的代码仅在字体大小样式为内联时才有效，并且我在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中完成。 很难确定所有不同浏览器的宽度，这就是为什么我包含该功能。 但是一旦有了宽度，您只需要做一个简单的检查，就可以提高锚标记的字体大小样式。 我建议使用静态大小，以使字体更容易预测并且不会随页面大小缩放。

当考虑不同类型的用户时（这是移动用户，您绝对不希望字体太小而不能全部容纳在一页上），这是最佳做法。

代码的Src： http : //james.padolsey.com/javascript/get-document-height-cross-browser/

Answer 2

您可以通过访问CSSRule-Object修改规则。

细节：

IE <9： http ： //help.dottoro.com/ljcufoej.php
其他： http ： //help.dottoro.com/ljdxvksd.php

Answer 3

使用媒体查询可能会获得更好的结果：

@media all and (max-width: 1280px) {
    a{font-size:12pt;}
}

您可以重复此操作以减小尺寸。 它不会平稳过渡，但不需要JavaScript（而且在调整窗口大小时进行了很多更改，以至于可能不会注意到文本大小的变化）。