javascript - Mewujudkan laman web boleh laras dengan kekurangan kemahiran CSS - Bentuk CSS

Ini adalah soalan pertama saya di sini, jadi sila tunjukkan sebarang kesilapan yang telah saya buat.

Saya terpaksa membuat halaman web yang kelihatan seperti bendera sebuah pasukan. Saya telah berjaya melakukannya, tetapi hanya dengan saiz elemen yang tetap :

Pada resolusi lain ia tidak muat pada skrin.
Kod:

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

Berikut adalah jsfiddle bendera saya: klik
Seperti yang anda boleh lihat, saya menggunakan bentuk css untuk melukis segitiga dan berlian. Soalan saya adalah:
Bagaimana saya boleh membuat bendera itu (laman web) sesuai dengan pelbagai resolusi skrin? Bagaimana untuk menyatakan lebar dan tinggi bentuk saya dalam peratus?
Seperti yang saya telah baca di sini, contohnya border-left tidak boleh mempunyai nilai dalam %.

EDIT
Terima kasih kepada @joe_coolish, saya berjaya membuat halaman web itu boleh diubah saiz. Walau bagaimanapun, saya mempunyai satu masalah lagi.
Berikut ialah html saya:

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

Perubahan pada kod Joe:

var main = $('#main');

function update() {

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

...

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

Sekarang apabila saya memuatkan halaman saya, ini berlaku:

Saya perlu memeriksa beberapa elemen untuk menggunakannya dengan betul. Kenapa?

Jawapan #1

Anda juga boleh menggunakan SVG.

Lebih banyak matematik, tetapi ia berfungsi dengan agak baik. Cuma lampirkan pada acara $ (window).resize() dan kemudian kemas kini segitiga. Berikut adalah percubaan pertama saya:

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/

Jawapan #2

Cara yang paling boleh dipercayai untuk melakukan ini adalah dengan menulis peraturan yang berbeza untuk saiz skrin yang berbeza.

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

Ulangi proses ini untuk setiap peranti yang anda sasarkan, sehingga anda mempunyai yang baik untuk setiap resolusi.

Perhatikan bahawa bendera hanya akan mempunyai saiz sebanyak yang anda tentukan menggunakan 'titik pecah' ini.

Ia mungkin tidak kelihatan seperti penyelesaian paling bijak, tetapi ia akan sangat boleh dipercayai.

Adalah mungkin untuk membuat CSS yang akan berfungsi pada saiz apa pun, tetapi itu melibatkan kod menjadi sedikit canggih, dan mempelajari teknik-teknik itu mungkin memerlukan masa lebih lama daripada melakukan cara yang mudah.

Satu nota terakhir: 1245px adalah sangat besar untuk saiz lalai. Ramai pengguna akan menggunakan paparan yang lebih sempit daripada itu.