當檢測到一定的最小屏幕分辨率大小時，如何通過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（而且在調整窗口大小時進行了很多更改，以至於可能不會注意到文本大小的變化）。