更改页面大小并按比例调整页面元素的大小

时间：2019-02-28 11:05:33

标签： css html5 responsive-design bootstrap-4

对于使页面具有响应性，这似乎是一个显而易见的问题，但到目前为止，我仍无法解决该问题。

我使用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>

0 个答案:

没有答案
相关问题
最新问题