javascript - Resiiseable-verkkosivun luominen ilman CSS-taitoja - CSS-muodot

Tämä on ensimmäinen kysymykseni täällä, joten olkaa hyvä ja osoittakaa kaikki tekemäni virheet.

Minun oli pakko luoda verkkosivu, joka näyttää joukkueen lipulta. Olen onnistunut tekemään sen, mutta vain kiinteillä elementtien kooilla :

Muuilla tarkkuuksilla se ei vain sovi näytölle.
Koodi:

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

Tässä on jsfiddle lipustani: klikkaa
Kuten näet, käytän css-muotoja piirtääkseni kolmioita ja timantin. Kysymykseni ovat:
Kuinka voin tehdä sen lipun (verkkosivun) sopimaan erilaisiin näytön resoluutioihin? Kuinka esittää muotojeni leveys ja korkeus prosenteissa?
Kuten olen lukenut täältä, esim. border-left ei voi saada arvoa prosentteina.

MUOKKAA
Kiitos @joe_coolish, onnistuin tekemään tuon verkkosivun koon muutettavaksi. Kuitenkin minulla on vielä yksi ongelma.
Tässä on minun 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>

Muutoksia Joen koodiin:

var main = $('#main');

function update() {

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

...

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

Nyt kun lataan sivuni, tämä tapahtuu:

Minun täytyy tarkastaa joitain elementtejä, jotta se toimisi oikein. Miksi?

Vastaus #1

Voisit myös valita SVG:n.

Lisää matematiikkaa, mutta se toimii melko hyvin. Liitä se vain $ (window).resize()-tapahtumaan ja päivitä sitten kolmiot. Tässä on ensimmäinen yritykseni:

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/

Vastaus #2

Luotettavin tapa tehdä tämä on kirjoittaa erilaiset säännöt eri näytön kokoja varten.

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

Toista prosessi jokaiselle kohdelaitteellesi, kunnes sinulla on hyvä jokaiselle resoluutiolle.

Huomaa, että lipulla tulee olemaan vain niin monta kokoa kuin määrität näitä "katkaisupisteitä" käyttämällä.

Se ei ehkä vaikuta nerokkaimmalta ratkaisulta, mutta se tulee olemaan erittäin luotettava.

On mahdollista tehdä CSS:ää, joka toimii kaikissa ko'oissa, mutta se vaatii, että koodi muuttuu hieman hienostuneemmaksi, ja tekniikoiden oppiminen saattaa viedä sinulta enemmän aikaa kuin sen tekeminen yksinkertaisella tavalla.

Viimeinen huomautus: 1245px on erittäin suuri oletuskoko. Monet käyttäjät käyttävät kapeampia näyttöjä kuin tuo.