创建可调整大小的网站缺乏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对于默认尺寸非常大。很多用户将使用比这更窄的显示器。