javascript - Vytváření resizovatelné webové stránky při nedostatku dovedností v CSS - CSS tvary

To je moje první otázka zde, takže prosím upozorněte mě na jakékoliv chyby, které jsem udělal.

Bylo mi nařízeno vytvořit webovou stránku, která vypadá jako vlajka týmu. Podařilo se mi to udělat, ale jen s pevnou velikostí prvků :

Na jiných rozlišeních se to prostě nezobrazuje správně na obrazovce.
Kód:

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;
    }

Tady je jsfiddle mé vlajky: klikněte
Jak vidíte, používám CSS tvary k nakreslení trojúhelníků a diamantu. Mé otázky jsou:
Jak mohu udělat, aby ta vlajka (webová stránka) seděla na různých rozlišeních obrazovky? Jak prezentovat šířku a výšku mých tvarů v procentech?
Jak jsem zde četl, např. border-left nemůže mít hodnotu v %.

EDITOVAT
Díky @joe_coolish se mi podařilo udělat tuto webovou stránku změnitelnou velikost. Nicméně mám ještě jeden problém.
Tady je můj 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>

Změny v Joeově kódu:

var main = $('#main');

function update() {

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

...

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

Teď, když načítám svou stránku, se to děje:

Musím zkontrolovat nějaký prvek, abych s ním mohl správně pracovat. Proč?

Odpověď č. 1

Můžete také zvolit SVG.

Více matematiky, ale funguje to docela dobře. Stačí připojit k události $ (window).resize() a pak aktualizovat trojúhelníky. Zde je můj první pokus:

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/

Odpověď č. 2

Nejspolehlivější způsob, jak to udělat, je napsat různé pravidla pro různé velikosti obrazovky.

@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
}

Opakujte tento proces pro každé zařízení, na které cílíte, dokud nebudete mít dobré pro každé rozlišení.

Vezměte na vědomí, že vlajka bude mít pouze tolik velikostí, kolik určíte pomocí těchto „bodů zlomu“.

Nemusí to vypadat jako nejchytřejší řešení, ale bude to velmi spolehlivé.

Je možné udělat CSS, které bude fungovat při jakékoli velikosti, ale to zahrnuje, že kód bude trochu složitější, a naučení se těchto technik může trvat déle než udělat to jednoduchým způsobem.

Jedna poslední poznámka: 1245 px je velmi velké pro výchozí velikost. Mnoho uživatelů bude používat užší displeje než tento.