創建可調整大小的網站缺乏CSS技能 - CSS形狀

Question

這是我的第一個問題，所以請指出我犯的任何錯誤。

我被迫創建了一個看起來像團隊旗幟的網頁。我已經設法做到這一點，但只有固定大小的元素：

在其他分辨率，它只是不適合屏幕。
代碼：

HTML

<div id="centered"> 
    <div id="triangle-down"></div> 
    <div id="triangle-right"></div> 
    <div id="triangle-left"></div> 
    <div id="triangle-up"></div> 
    <div id="diamond-narrow"></div> 
</div> 

CSS

#centered { 
     position:relative; clear:left; 
     height:766px; width:1245; 
     margin:0 auto; 
     background:#fff; 
     z-index: 0; 
    } 

    #triangle-up { 
     position: absolute; 
     margin-left: 281px; 
     margin-top: 555px; 
     width: 0; 
     height: 0; 
     border-left: 341px solid transparent; 
     border-right: 341px solid transparent; 
     border-bottom: 211px solid #3b5998; 
     z-index: 1; 
    } 

    #triangle-down { 
     position: absolute; 
     margin-left: 281px; 
     width: 0; 
     height: 0; 
     border-left: 341px solid transparent; 
     border-right: 341px solid transparent; 
     border-top: 211px solid #3b5998; 
     z-index: 1; 
    } 

    #triangle-left { 
     position: absolute; 
     margin-left: 902px; 
     margin-top: 171px; 
     width: 0; 
     height: 0; 
     border-top: 211px solid transparent; 
     border-right: 343px solid #3b5998; 
     border-bottom: 211px solid transparent; 
     z-index: 1; 
    } 

    #triangle-right { 
     position: absolute; 
     margin-top: 171px; 
     width: 0; 
     height: 0; 
     border-top: 211px solid transparent; 
     border-left: 343px solid #3b5998; 
     border-bottom: 211px solid transparent; 
     z-index: 1; 
    } 

    #diamond-narrow { 
     margin-left: 342px; 
     width: 0; 
     height: 0; 
     border: 280px solid transparent; 
     border-bottom: 173px solid red; 
     position: absolute; 
     top: -70px; 
} 

    #diamond-narrow:after { 
     content: ''; 
     position: absolute; 
     left: -280px; top: 173px; 
     width: 0; 
     height: 0; 
     border: 280px solid transparent; 
     border-top: 173px solid red; 
    } 

這裏是我的標誌的的jsfiddle：click
正如你可以看到我使用的CSS形狀繪製三角形和菱形。我的問題是：
如何讓該標誌（網頁）適合不同的屏幕分辨率？如何以百分比呈現我的形狀的寬度和高度？
正如我讀到here，例如。邊界左側的值不能以％表示。

編輯
感謝@joe_coolish，我設法讓該網頁調整大小。但是，我還有一個問題。
這裏是我的html：

<table width="100%" style="height: 100%;"> 
    <tr> 
     <td width="10%" height="10%"></td> 
     <td></td> 
     <td width="10%" height="10%"></td> 
    </tr> 
    <tr> 
     <td width="10%" height="10%"></td> 
     <td id="centered" bgcolor="white"> 
      <div id="main"/> 
     </td> 
     <td width="10%" height="10%"></td> 
    </tr> 
    <tr> 
     <td width="10%" height="10%"></td> 
     <td></td> 
     <td width="10%" height="10%"></td> 
    </tr> 
</table> 

更改喬代碼：

var main = $('#main'); 

function update() { 

var height = $('#centered').height(); 
var width = $('#centered').width(); 

... 

$('#centered').resize(function() { 
update(); 
}); 

現在，當我打開我的網頁，出現這種情況：
我要檢查一些元素才能正常工作了。爲什麼？

Answer 1

你也可以使用SVG。

更多的數學，但它確實工作得很好。只需附加到$(window).resize()事件，然後更新三角形。這是我第一次嘗試：

var main = $('#main'); 

function update() { 

    var height = $(window).height(); 
    var width = $(window).width(); 

    var height10 = height/5 
    var heightMinus10 = height - height10; 
    var width10 = width/5 
    var widthMinus10 = width - width10; 

    var height2 = height/2; 
    var width2 = width/2; 
    var width3 = width2 - width10; 
    var height3 = height2 - height10; 
    var width3x2 = width2 + width10; 
    var height3x2 = height2 + height10; 

    var points1 = '0,' + height10 + ' 0,' + heightMinus10 + ' ' + width3 + ',' + height2; 
    var points2 = width10 + ',0 ' + widthMinus10 + ',0 ' + width2 + ',' + height3; 
    var points3 = width + ',' + height10 + ' '+width+',' + heightMinus10 + ' ' + width3x2 + ',' + height2; 
    var points4 = width10 + ','+height + ' ' + widthMinus10 + ','+height+' ' + width2 + ',' + height3x2; 
    var points5 = width3 + ',' + height2 + ' '+width2+',' + height3 + ' ' + width3x2 + ',' + height2 + ' ' + width2 + ',' + height3x2; 

    var svg1 = '<svg height="' + height + '" width="' + width + '">'+ 
     '<polygon points="' + points1 + '" style="fill:blue" />'+ 
     '<polygon points="' + points2 + '" style="fill:blue" />'+ 
     '<polygon points="' + points3 + '" style="fill:blue" />'+ 
     '<polygon points="' + points4 + '" style="fill:blue" />'+ 
     '<polygon points="' + points5 + '" style="fill:red" />'+ 
     '</svg>'; 

    main.empty(); 
    main.append($(svg1)); 
} 

update(); 

$(window).resize(function() { 
    update(); 
}); 

http://jsfiddle.net/ePt62/

Answer 2

做到這一點的最可靠的方法是爲不同的屏幕尺寸編寫不同的規則。

@media screen and (min-width: 1300px){ 
    // your current sizes, anywhere you use px values really, can go here 
} 


@media screen and (min-width: 800px){ 
    // smaller sizes that give similar results can go here 
} 

爲每個您定位的設備重複該過程，直到每個分辨率都有一個好的分辨率。

請注意，該標誌只能使用與您使用這些「折點」指定的尺寸相同的尺寸。

它可能不是最聰明的解決方案，但它會非常可靠。

這是可以做到的CSS，將在任何規模的工作，但涉及的代碼變得有點花哨，和學習的技術可能需要比你做的簡單的方法更長。

最後一點：1245px對於默認尺寸非常大。很多用戶將使用比這更窄的顯示器。