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＆lt; 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（当您调整窗口大小时，除了如此多的更改之外，文本大小的跳转可能不会被注意到。）

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

3 个答案:

详细说明：