1

我有这个代码：

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 进行更改？我的代码仅在字体大小样式是内联的情况下才有效，并且我在 CSS 脚本中需要它。

我发现我需要的代码随onResize事件一起激活。

4

3 回答 3

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 中完成。很难确定所有不同浏览器的宽度，这就是我包含该功能的原因。但是一旦你有了宽度，你只需要做一个简单的检查，你就可以为你的锚标签增加字体大小样式。我建议使用静态大小，以便字体更可预测并且不会随页面大小缩放。

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

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

于 2012-07-13T00:55:40.347 回答
0

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

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

您可以对越来越小的尺寸重复此操作。它不会平滑过渡，但它不需要 JavaScript（除了调整窗口大小时可能不会注意到文本大小跳跃的变化如此之多）。

于 2012-10-05T16:37:05.570 回答
0

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

细节：

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

于 2012-07-13T01:28:18.203 回答