javascript - CSS becerilerinin eksikliğine sahip olarak yeniden boyutlandırılabilir web sitesi oluşturma - CSS şekilleri

Buradaki ilk sorum, bu yüzden yaptığım herhangi bir hatayı lütfen belirtin.

Bir takımın bayrağı gibi görünen bir web sayfası oluşturmak zorundaydım. Bunu başarmayı başardım, ama sadece sabit boyuttaki öğelerle :

Diğer çözünürlüklerde ekranla uyumlu değil.
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;
    }

İşte bayrağımın bir jsfiddle örneği: tıklayın
Gördüğünüz gibi üçgenler ve bir elmas çizmek için css şekilleri kullanıyorum. Sorularım şunlar:
Bu bayrağı (web sayfasını) farklı ekran çözünürlüklerine nasıl uyarlayabilirim? Şekillerimin genişliğini ve yüksekliğini yüzde olarak nasıl belirtebilirim?
Burada okuduğum kadarıyla, ör. border-left yüzde değeri alamaz.

DÜZENLE
@joe_coolish sayesinde, o web sayfasını yeniden boyutlandırılabilir hale getirmeyi başardım. Ancak, bir sorunum daha var.
İşte benim html'im:

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

Joe'nun kodundaki değişiklikler:

var main = $('#main');

function update() {

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

...

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

Şimdi sayfamı yüklediğimde, bu oluyor:

Bir öğeyi düzgün çalışması için incelemem gerekiyor. Neden?

Cevap #1

Ayrıca SVG ile de gidebilirsiniz.

Daha fazla matematik, ama oldukça iyi çalışıyor. Sadece $ (window).resize() olayına bağlayın ve ardından üçgenleri güncelleyin. İşte benim ilk denemem:

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/

Cevap #2

Bunu yapmanın en güvenilir yolu, farklı ekran boyutları için farklı kurallar yazmaktır.

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

Hedeflediğiniz her cihaz için bu işlemi tekrarlayın, her çözünürlük için iyi bir tane elde edene kadar.

Bayrağın yalnızca bu “kırılma noktalarını” kullanarak belirttiğiniz kadar boyutu olacağını unutmayın.

En akıllıca çözüm gibi görünmeyebilir, ama çok güvenilir olacaktır.

Her boyutta çalışacak CSS yapmak mümkün, ama bu kodun biraz karmaşık hale gelmesini gerektirir ve teknikleri öğrenmek, bunu basit yoldan yapmaktan daha uzun sürebilir.

Son bir not: 1245px varsayılan boyut için çok büyük. Birçok kullanıcı bundan daha dar ekranlar kullanıyor olacak.