جافاسكريبت - إنشاء موقع ويب قابل لتغيير الحجم مع نقص مهارات CSS - أشكال CSS

هذا هو سؤالي الأول هنا، لذا يرجى الإشارة إلى أي من الأخطاء التي ارتكبتها.

كنت مضطرًا لإنشاء صفحة ويب تشبه علم فريق. لقد تمكنت من القيام بذلك، ولكن فقط بحجم محدد للعناصر :

على دقات العرض الأخرى، لا يتناسب مع الشاشة.
الكود:

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>

سي إس إس

    #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 لعلمي: انقر
كما ترى، أنا أستخدم أشكال CSS لرسم مثلثات وماسة. أسئلتي هي:
كيف يمكنني جعل هذا العلم (صفحة الويب) يتناسب مع دقات الشاشة المختلفة؟ كيف يمكن عرض عرض وارتفاع أشكالي بالنسب المئوية؟
كما قرأت هنا، على سبيل المثال، لا يمكن أن يكون للـ border-left قيمة بالنسبة المئوية.

تعديل
بفضل @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();
});

الآن عندما أقوم بتحميل صفحتي، يحدث هذا:

عليّ فحص بعض العناصر للعمل عليها بشكل صحيح. لماذا؟

الإجابة رقم 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/

الإجابة رقم 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 تعمل في أي حجم، لكن ذلك يتطلب أن يصبح الكود معقدًا قليلاً، وقد يستغرق تعلم هذه التقنيات وقتًا أطول من القيام بها بطريقة بسيطة.

ملاحظة أخيرة: 1245 بكسل كبير جدًا لحجم افتراضي. الكثير من المستخدمين سيستخدمون شاشات أضيق من ذلك.