Изменить размер страницы и пропорционально изменить размер элемента страницы - PullRequest
Новая
       21

Изменить размер страницы и пропорционально изменить размер элемента страницы

0 голосов
/ 28 февраля 2019

Это будет выглядеть как очевидный вопрос о том, как сделать страницу отзывчивой, но мне пока не удалось решить эту проблему.

Я создал эту страницу с помощью Bootstrap 4 и HTML.

У меня проблема в том, что страница не умещается полностью на экране, но нужно использовать вертикальную прокрутку, чтобы увидеть все.Но, используя Chrome, когда я увеличиваю это до 75%, а также изменяю размер окна браузера на 2/3 от полного размера (с помощью инструментов разработчика я вижу, что страница принимает размер 1810 x 1189, в этом случае все выглядитхорошо и пропорции всех элементов.

Окончательный результат, который я жду, таков: используйте 100% масштабирование браузера и окно браузера, чтобы взять весь экран (не уменьшенный, чтобы уменьшить его)и это должно выглядеть равным, что когда я устанавливаю масштабирование браузера до 75% и изменяю размер окна браузера 2/3, делая страницу 1810 x 1189.

Другими словами, мне нужно, чтобы весь контент был виден вэкран, сохраняйте пропорции элементов без использования вертикальной или горизонтальной прокрутки.

Я попытался также изменить область просмотра, но безуспешно. Я знаю, что я делаю много вещей неправильно, и ответ будет выглядетьочевидно, но я очень запутался.

Вот код 

<!DOCTYPE html>
<html lang="en">

<head>
<title>Marketing Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['DR', 60],
            ['LI', 20],
            ['Events', 10],
            ['Other', 10]
        ]);

        var options = {
            legend: 'none',
            pieSliceText: 'label',
            backgroundColor: '#343a40',
            colors: ['#2F5499', '#3965B8', '#708CCE', '#4A6BAD'],
            is3D: true,
            fontSize: '15',
            chartArea: { width: 460, height: 260 }
        };

        var chart1 = new google.visualization.PieChart(document.getElementById('piechart_3d_1'));
        var chart2 = new google.visualization.PieChart(document.getElementById('piechart_3d_2'));
        var chart3 = new google.visualization.PieChart(document.getElementById('piechart_3d_3'));
        chart1.draw(data, options);
        chart2.draw(data, options);
        chart3.draw(data, options);
    }
</script>

</head>

<body>

<style>
    body {
        font-family: sans-serif;
    }

    .card-body {
        padding: 0.01rem
    }

    .padding-header {
        padding: 0.6rem
    }

    .bg-light-blue {
        background-color: #4671C3;
    }

    .bg-lila {
        background-color: #6F339F;
    }

    .bg-dark {
        background-color: #424242;
    }

    .black-box-size {
        max-width: 100%;
        height: 325px;
    }

    .shape-round {
        height: 150px;
        width: 150px;
        background-color: #6F339F;
        border-radius: 50%;
        display: inline-block;
        text-align: center;
        color: #fff;
        padding: 3.5rem 1.5rem;
    }

    .block-container {
        position: absolute;
        top: 40%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        width: 109px;
        height: 38px;
    }

    .shadowBox {
        text-decoration: none;
        display: absolute;
        display: block;
        transition: 0.5s;
        box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
    }

    .letterSpacing {
        letter-spacing: 4px;
    }

    /*Viewport windows font size percentage*/
    .vwFontSizeH1 {
        font-size: 2.1vw;
    }

    .vwFontSizeH2 {
        font-size: 1.65vw;
    }
</style>
<div class="container-fluid" style="margin-top: 30px;">
    <p></p><di></di>
    <div class="card text-white bg-light-blue shadowBox">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">

                </div>
                <div class="col-md-6">
                    <h1 class="text-center padding-header letterSpacing vwFontSizeH1">Marketing Performance Dashboard
                    </h1>
                </div>
                <div class="col-md-3"></div>
            </div>
        </div>
    </div>

    <p></p>

    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-11">
                    <h2
                        class="text-center padding-header bg-light-blue text-white letterSpacing shadowBox vwFontSizeH2">
                        Today</h2>
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="text-center padding-header bg-light-blue text-white letterSpacing shadowBox vwFontSizeH2">This
                        Week</h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-11">
                    <h2 class="text-center padding-header bg-light-blue text-white letterSpacing shadowBox vwFontSizeH2">This
                        Month</h2>
                </div>
            </div>
        </div>
    </div>

    <p></p>

    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                    <span class="block-container">
                        <h2 class="text-center padding-header bg-light-blue text-white vwFontSizeH2">ENQ</h2>
                    </span>
                </div>
                <div class="col-md-3">
                    <span class="shape-round shadowBox">
                        <span class="text-center vwFontSizeH2">10/32</span>
                    </span>
                    <p></p>
                </div>
                <div class="col-md-5"></div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                    <span class="block-container">
                        <h2 class="text-center padding-header bg-light-blue text-white vwFontSizeH2">BOOK</h2>
                    </span>
                </div>
                <div class="col-md-3">
                    <span class="shape-round shadowBox">
                        <span class="text-center vwFontSizeH2">15/20</span>
                    </span>
                    <p></p>
                </div>
                <div class="col-md-5"></div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                    <span class="block-container">
                        <h2 class="text-center padding-header bg-light-blue text-white vwFontSizeH2">SAT</h2>
                    </span>
                </div>
                <div class="col-md-3">
                    <span class="shape-round shadowBox">
                        <h2 class="text-center vwFontSizeH2">09/17</h2>
                    </span>
                    <p></p>
                </div>
                <div class="col-md-5"></div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                </div>
                <div class="col-md-3">
                    <span class="shape-round shadowBox">
                        <h2 class="text-center vwFontSizeH2">10/32</h2>
                    </span>
                    <p></p>
                </div>
                <div class="col-md-5"></div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                </div>
                <div class="col-md-3">
                    <span class="shape-round shadowBox">
                        <h2 class="text-center vwFontSizeH2">15/20</h2>
                    </span>
                    <p></p>
                </div>
                <div class="col-md-5"></div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                </div>
                <div class="col-md-3">
                    <span class="shape-round shadowBox">
                        <h2 class="text-center vwFontSizeH2">09/17</h2>
                    </span>
                    <p></p>
                </div>
                <div class="col-md-5"></div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-5">
                </div>
                <div class="col-md-3">
                    <span class="shape-round shadowBox">
                        <h2 class="text-center vwFontSizeH2">10/32</h2>
                    </span>
                    <p></p>
                </div>
                <div class="col-md-4"></div>
            </div>
            <div class="row">
                <div class="col-md-5">
                </div>
                <div class="col-md-3">
                    <span class="shape-round shadowBox">
                        <h2 class="text-center vwFontSizeH2">15/20</h2>
                    </span>
                    <p></p>
                </div>
                <div class="col-md-4"></div>
            </div>
            <div class="row">
                <div class="col-md-5"></div>
                <div class="col-md-3">
                    <span class="shape-round shadowBox">
                        <h2 class="text-center vwFontSizeH2">09/17</h2>
                    </span>
                    <p></p>
                </div>
                <div class="col-md-4"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <h2 class="padding-header bg-light-blue text-white shadowBox letterSpacing vwFontSizeH2">Opportunity Breakdown (Sat)
            </h2>
        </div>
    </div>

    <p></p>

    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-11">
                    <div class="black-box-size bg-dark text-white shadowBox">

                        <h2 class="text-center padding-header letterSpacing vwFontSizeH2">Today</h2>
                        <div class="row">
                            <div class="col-md-1"></div>
                            <div class="col-md-8">
                                <div id="piechart_3d_1" style="width: 460px; height: 260px;"></div>
                            </div>
                            <div class="col-md-3"></div>
                        </div>

                    </div>
                </div>
                <div class="col-md-1">

                </div>
            </div>
        </div>
        <div class="col-md-4">

            <div class="black-box-size bg-dark text-white shadowBox">

                <h2 class="text-center padding-header letterSpacing vwFontSizeH2">This Week</h2>
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <div id="piechart_3d_2" style="width: 510px; height: 260px;"></div>
                    </div>
                    <div class="col-md-1"></div>
                </div>

            </div>

        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-1">

                </div>
                <div class="col-md-11">
                    <div class="black-box-size bg-dark text-white shadowBox">

                        <h2 class="text-center padding-header letterSpacing vwFontSizeH2">This Month</h2>
                        <div class="row">
                            <div class="col-md-1"></div>
                            <div class="col-md-8">
                                <div id="piechart_3d_3" style="width: 460px; height: 260px;"></div>
                            </div>
                            <div class="col-md-3"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <p></p>

    <div class="card text-white bg-light-blue shadowBox">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">

                </div>
                <div class="col-md-6">
                    <h2 class="text-center padding-header letterSpacing vwFontSizeH2" style="margin-top: 6px;">Revenue Generated this Month - £ 100,000,000
                    </h2>
                </div>
                <div class="col-md-3">

                </div>
            </div>
        </div>
    </div>

    <p></p>

</div>

...