javascript - Tạo trang web có thể thay đổi kích thước mà không có nhiều kỹ năng CSS - Hình dạng CSS

Đây là câu hỏi đầu tiên của tôi ở đây, vì vậy xin hãy chỉ ra bất kỳ lỗi nào mà tôi đã mắc phải.

Tôi đã được yêu cầu tạo một trang web trông giống như lá cờ của một đội. Tôi đã thực hiện được điều đó, nhưng chỉ với kích thước cố định của các phần tử :

Trên các độ phân giải khác, nó chỉ không vừa màn hình.
Mã:

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

Đây là một jsfiddle về lá cờ của tôi: click
Như bạn có thể thấy, tôi đang sử dụng các hình dạng CSS để vẽ các hình tam giác và một hình thoi. Các câu hỏi của tôi là:
Làm thế nào để lá cờ đó (trang web) phù hợp với các độ phân giải màn hình khác nhau? Làm thế nào để trình bày chiều rộng và chiều cao của các hình dạng theo phần trăm?
Như tôi đã đọc ở đây, ví dụ: border-left không thể có giá trị theo %.

CHỈNH SỬA
Nhờ @joe_coolish, tôi đã quản lý để làm cho trang web đó có thể thay đổi kích thước. Tuy nhiên, tôi gặp thêm một vấn đề nữa.
Đây là html của tôi:

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

Các thay đổi đối với mã của Joe:

var main = $('#main');

function update() {

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

...

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

Bây giờ khi tôi tải trang của mình, điều này xảy ra:

Tôi phải kiểm tra một số phần tử để nó hoạt động đúng. Tại sao?

Câu trả lời #1

Bạn cũng có thể chọn SVG.

Thêm toán học nữa, nhưng nó hoạt động khá tốt. Chỉ cần gán vào sự kiện $ (window).resize() và sau đó cập nhật các tam giác. Đây là thử nghiệm đầu tiên của tôi:

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/

Câu trả lời #2

Cách đáng tin cậy nhất để làm điều này là viết các quy tắc khác nhau cho các kích thước màn hình khác nhau.

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

Lặp lại quá trình này cho mỗi thiết bị bạn nhắm tới, cho đến khi bạn có một cái tốt cho mỗi độ phân giải.

Lưu ý rằng lá cờ sẽ chỉ có nhiều kích thước như bạn chỉ định bằng cách sử dụng các "điểm ngắt" này.

Nó có thể không có vẻ là giải pháp thông minh nhất, nhưng nó sẽ rất đáng tin cậy.

Có thể viết CSS hoạt động ở bất kỳ kích thước nào, nhưng điều đó liên quan đến việc mã trở nên hơi phức tạp, và học các kỹ thuật có thể mất nhiều thời gian hơn so với làm theo cách đơn giản.

Một lưu ý cuối cùng: 1245px là rất lớn cho kích thước mặc định. Nhiều người dùng sẽ sử dụng màn hình hẹp hơn so với điều đó.