如何使我的网站响应手机？

发布于 2025-02-06 15:45:11 字数 12744 浏览 2 评论 0原文

我很难在手机上正确显示我的网站。这是应该的外观（从我关注的教程中）：

不幸的是，这就是它在我的三星Galaxy S5上的外观：

我相信问题是我的CSS。我正在遵循一个教程，即使我的代码与讲师的代码相匹配，我的网站也不会以相同的方式渲染。不同版本的Visual Studio代码会影响这一点吗？

这是我的代码：

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
    <title>Admin panel</title>
</head>
<body>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.png" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main">
            <div class="cards">
                <div class="card">
                    <div class="card-content">
                        <div class="number">1217</div>
                        <div class="card-name">Students</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">42</div>
                        <div class="card-name">Teachers</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">68</div>
                        <div class="card-name">Employees</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">$4500</div>
                        <div class="card-name">Earnings</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                </div>
            </div>
            <div class="charts">
                <div class="chart">
                    <h2>Earnings (past 12 months)</h2>
                    <canvas id="lineChart"></canvas>
                </div>
                <div class="chart" id="doughnut-chart">
                    <h2>Employees</h2>
                    <canvas id="doughnut"></canvas>
                </div>
            </div>
        </div>  
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <script src="chart.js"></script>
    <script src="chart2.js"></script>
</body>
</html>

css

{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
.topbar{
    position: fixed;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 10fr 0.4fr 1fr;
    align-items: center;
    z-index: 1;
}
.logo h2{
    color: #d34d4d;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input{
    width: 100%;
    height: 40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
}

.search >label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.user{
    position: relative;
    width: 50px;
    height: 50px;
}
.user img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* sidebar starts here */

.sidebar{
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #e26666;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}

.sidebar ul li{
    width: 100%;
    list-style: none;
}
.sidebar ul li:hover{
    background: #fff;
}
.sidebar ul li:hover a{
    color: #e26666;
}

.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    padding-left: 30px;
    justify-content: flex-start;
    align-items: center
  }
  
.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    align-self: flex-start;
}
.sidebar ul li a svg{
    margin-right: 15px;
    width: 25px !important;
}

/* main section starts here*/
.main {
    position: absolute;
    top: 60px;
    width: calc(100% - 260px);
    left: 260px;
    min-height: calc(100vh - 60px);
    background: #f3f3f3;
}
.cards{
    width: 100%;
    padding: 35px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}
.cards .card{
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
}
.cards .card:hover{
    background: #e26666;
}
.cards .card:hover .number{
    color: #fff;
}

.cards .card:hover .card-name{
    color: #fff;
}

.cards .card:hover .icon-box i{
    color: #fff;
}

.cards .card:hover .icon-box svg{
    color: #fff;
}

.number{
    font-size: 35px;
    font-weight: 500;
    color: #e26666;
}

.card-name{
    color: #888;
    font-weight: 600;
}
.icon-box svg,
.icon-box i {
    font-size: 45px;
    color: #e26666;
}
/* charts starts here */

.charts{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
    width: 100%;
    padding: 20px;
    padding-top: 0;
}
.chart{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
    width: 100%;
}

.chart h2{
    margin-bottom: 5px;
    font-size: 20px;
    color: #666;
    text-align: center;
}

/* Responsive starts here */
@media (max-width:1115px) {
    .sidebar{
        width: 60px;
    }
    .main{
        left: 60px;
        width: calc(100% - 60px);
    }   
}
@media (max-width:880px) {
    .cards{
        grid-template-columns: repeat(2, 1fr);
    }
    .charts{
        grid-template-columns: 1fr;
    }
    #doughnut-chart{
        padding: 50px;
    }
    #doughnut{
        padding: 50px;
    }
}
@media (max-width:500px){
    .topbar{
        grid-template-columns: 1fr 5fr 0.4fr 1fr;
    }
    .cards{
        grid-template-columns: 1fr;
    }
    .logo h2{
        font-size: 20px;
    }
    .search{
        width: 80%;
    }
    .search input{
        padding: 0 20px;
    }
    .fa-bell{
        margin-right: 5px;
    }
    .user{
        width: 40px;
        height: 40px;
    }
    #doughnut-chart{
       padding: 10px; 
    }
    #doughnut{
        padding: 0;
    }
}

Chart.js

线图

const ctx = document.getElementById('lineChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',],
        datasets: [{
            label: 'Earnings in $',
            data: [2500,3452,1526,5500,1278,2500,2500,3000,4000,3300,2600,2800],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 3
        }]
    },
    options: {
        responsise: true,
    
    }
});

Donut Chart

const ctx2 = document.getElementById('doughnut').getContext('2d');
const myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: ['Academic', 'Non academic', 'Administration', 'Others'],
        datasets: [{
            label: 'Employees',
            data: [42, 12, 8, 6],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true
    }
});

原文

I'm having trouble making my website display correctly on cellphones. Here's how it should look (from a tutorial I'm following):

Unfortunately, this is how it looks on my Samsung Galaxy S5:

I believe the issue is with my CSS. I'm following a tutorial, and even though my code matches the instructor's, my website isn't rendering the same way. Could different versions of Visual Studio Code affect this?

Here's my code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
    <title>Admin panel</title>
</head>
<body>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.png" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main">
            <div class="cards">
                <div class="card">
                    <div class="card-content">
                        <div class="number">1217</div>
                        <div class="card-name">Students</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">42</div>
                        <div class="card-name">Teachers</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">68</div>
                        <div class="card-name">Employees</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">$4500</div>
                        <div class="card-name">Earnings</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                </div>
            </div>
            <div class="charts">
                <div class="chart">
                    <h2>Earnings (past 12 months)</h2>
                    <canvas id="lineChart"></canvas>
                </div>
                <div class="chart" id="doughnut-chart">
                    <h2>Employees</h2>
                    <canvas id="doughnut"></canvas>
                </div>
            </div>
        </div>  
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <script src="chart.js"></script>
    <script src="chart2.js"></script>
</body>
</html>

CSS

{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
.topbar{
    position: fixed;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 10fr 0.4fr 1fr;
    align-items: center;
    z-index: 1;
}
.logo h2{
    color: #d34d4d;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input{
    width: 100%;
    height: 40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
}

.search >label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.user{
    position: relative;
    width: 50px;
    height: 50px;
}
.user img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* sidebar starts here */

.sidebar{
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #e26666;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}

.sidebar ul li{
    width: 100%;
    list-style: none;
}
.sidebar ul li:hover{
    background: #fff;
}
.sidebar ul li:hover a{
    color: #e26666;
}

.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    padding-left: 30px;
    justify-content: flex-start;
    align-items: center
  }
  
.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    align-self: flex-start;
}
.sidebar ul li a svg{
    margin-right: 15px;
    width: 25px !important;
}

/* main section starts here*/
.main {
    position: absolute;
    top: 60px;
    width: calc(100% - 260px);
    left: 260px;
    min-height: calc(100vh - 60px);
    background: #f3f3f3;
}
.cards{
    width: 100%;
    padding: 35px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}
.cards .card{
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
}
.cards .card:hover{
    background: #e26666;
}
.cards .card:hover .number{
    color: #fff;
}

.cards .card:hover .card-name{
    color: #fff;
}

.cards .card:hover .icon-box i{
    color: #fff;
}

.cards .card:hover .icon-box svg{
    color: #fff;
}

.number{
    font-size: 35px;
    font-weight: 500;
    color: #e26666;
}

.card-name{
    color: #888;
    font-weight: 600;
}
.icon-box svg,
.icon-box i {
    font-size: 45px;
    color: #e26666;
}
/* charts starts here */

.charts{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
    width: 100%;
    padding: 20px;
    padding-top: 0;
}
.chart{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
    width: 100%;
}

.chart h2{
    margin-bottom: 5px;
    font-size: 20px;
    color: #666;
    text-align: center;
}

/* Responsive starts here */
@media (max-width:1115px) {
    .sidebar{
        width: 60px;
    }
    .main{
        left: 60px;
        width: calc(100% - 60px);
    }   
}
@media (max-width:880px) {
    .cards{
        grid-template-columns: repeat(2, 1fr);
    }
    .charts{
        grid-template-columns: 1fr;
    }
    #doughnut-chart{
        padding: 50px;
    }
    #doughnut{
        padding: 50px;
    }
}
@media (max-width:500px){
    .topbar{
        grid-template-columns: 1fr 5fr 0.4fr 1fr;
    }
    .cards{
        grid-template-columns: 1fr;
    }
    .logo h2{
        font-size: 20px;
    }
    .search{
        width: 80%;
    }
    .search input{
        padding: 0 20px;
    }
    .fa-bell{
        margin-right: 5px;
    }
    .user{
        width: 40px;
        height: 40px;
    }
    #doughnut-chart{
       padding: 10px; 
    }
    #doughnut{
        padding: 0;
    }
}

chart.js

Line chart

const ctx = document.getElementById('lineChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',],
        datasets: [{
            label: 'Earnings in 
doughnut chart
const ctx2 = document.getElementById('doughnut').getContext('2d');
const myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: ['Academic', 'Non academic', 'Administration', 'Others'],
        datasets: [{
            label: 'Employees',
            data: [42, 12, 8, 6],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true
    }
});

,
            data: [2500,3452,1526,5500,1278,2500,2500,3000,4000,3300,2600,2800],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 3
        }]
    },
    options: {
        responsise: true,
    
    }
});

doughnut chart

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暗喜 2025-02-13 15:45:11

在这种情况下，解决方案是：

在CSS中添加canvas {max宽度：100％}内部/ *图表在此处开始 */
在LineChart JS js Change Change typo责任：true 响应：true

在Windows Firefox响应式设计模式下，已测试以降低到320x480的尺寸。

带有校正代码的摘要

const ctx = document.getElementById('lineChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',],
        datasets: [{
            label: 'Earnings in 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
.topbar{
    position: fixed;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 10fr 0.4fr 1fr;
    align-items: center;
    z-index: 1;
}
.logo h2{
    color: #d34d4d;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input{
    width: 100%;
    height: 40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
}

.search >label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.user{
    position: relative;
    width: 50px;
    height: 50px;
}
.user img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* sidebar starts here */

.sidebar{
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #e26666;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}

.sidebar ul li{
    width: 100%;
    list-style: none;
}
.sidebar ul li:hover{
    background: #fff;
}
.sidebar ul li:hover a{
    color: #e26666;
}

.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    padding-left: 30px;
    justify-content: flex-start;
    align-items: center
  }
  
.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    align-self: flex-start;
}
.sidebar ul li a svg{
    margin-right: 15px;
    width: 25px !important;
}

/* main section starts here*/
.main {
    position: absolute;
    top: 60px;
    width: calc(100% - 260px);
    left: 260px;
    min-height: calc(100vh - 60px);
    background: #f3f3f3;
}
.cards{
    width: 100%;
    padding: 35px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}
.cards .card{
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
}
.cards .card:hover{
    background: #e26666;
}
.cards .card:hover .number{
    color: #fff;
}

.cards .card:hover .card-name{
    color: #fff;
}

.cards .card:hover .icon-box i{
    color: #fff;
}

.cards .card:hover .icon-box svg{
    color: #fff;
}

.number{
    font-size: 35px;
    font-weight: 500;
    color: #e26666;
}

.card-name{
    color: #888;
    font-weight: 600;
}
.icon-box svg,
.icon-box i {
    font-size: 45px;
    color: #e26666;
}
/* charts starts here */

.charts{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
    width: 100%;
    padding: 20px;
    padding-top: 0;
}
.chart{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
    width: 100%;
}

.chart h2{
    margin-bottom: 5px;
    font-size: 20px;
    color: #666;
    text-align: center;
}

canvas { max-width: 100% }

/* Responsive starts here */
@media (max-width:1115px) {
    .sidebar{
        width: 60px;
    }
    .main{
        left: 60px;
        width: calc(100% - 60px);
    }   
}
@media (max-width:880px) {
    .cards{
        grid-template-columns: repeat(2, 1fr);
    }
    .charts{
        grid-template-columns: 1fr;
    }
    #doughnut-chart{
        padding: 50px;
    }
    #doughnut{
        padding: 50px;
    }
}
@media (max-width:500px){
    .topbar{
        grid-template-columns: 1fr 5fr 0.4fr 1fr;
    }
    .cards{
        grid-template-columns: 1fr;
    }
    .logo h2{
        font-size: 20px;
    }
    .search{
        width: 80%;
    }
    .search input{
        padding: 0 20px;
    }
    .fa-bell{
        margin-right: 5px;
    }
    .user{
        width: 40px;
        height: 40px;
    }
    #doughnut-chart{
       padding: 10px; 
    }
    #doughnut{
        padding: 0;
    }
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.png" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main">
            <div class="cards">
                <div class="card">
                    <div class="card-content">
                        <div class="number">1217</div>
                        <div class="card-name">Students</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">42</div>
                        <div class="card-name">Teachers</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">68</div>
                        <div class="card-name">Employees</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">$4500</div>
                        <div class="card-name">Earnings</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                </div>
            </div>
            <div class="charts">
                <div class="chart">
                    <h2>Earnings (past 12 months)</h2>
                    <canvas id="lineChart"></canvas>
                </div>
                <div class="chart" id="doughnut-chart">
                    <h2>Employees</h2>
                    <canvas id="doughnut"></canvas>
                </div>
            </div>
        </div>  
    </div>

,
            data: [2500,3452,1526,5500,1278,2500,2500,3000,4000,3300,2600,2800],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
    
    }
});

const ctx2 = document.getElementById('doughnut').getContext('2d');
const myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: ['Academic', 'Non academic', 'Administration', 'Others'],
        datasets: [{
            label: 'Employees',
            data: [42, 12, 8, 6],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true
    }
});

In this case, the solution is:

in CSS add canvas { max-width: 100% } inside /* charts starts here */
in the lineChart JS change typo responsise: true to responsive: true

That's it... Tested to work down to size 320x480 in Windows Firefox Responsive Design Mode.

Snippet with corrected code

const ctx = document.getElementById('lineChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',],
        datasets: [{
            label: 'Earnings in 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
.topbar{
    position: fixed;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    width: 100%;
    height: 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 10fr 0.4fr 1fr;
    align-items: center;
    z-index: 1;
}
.logo h2{
    color: #d34d4d;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input{
    width: 100%;
    height: 40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
}

.search >label {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.user{
    position: relative;
    width: 50px;
    height: 50px;
}
.user img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* sidebar starts here */

.sidebar{
    position: fixed;
    top: 60px;
    width: 260px;
    height: calc(100% - 60px);
    background: #e26666;
    overflow-x: hidden;
}

.sidebar ul {
    margin-top: 20px;
}

.sidebar ul li{
    width: 100%;
    list-style: none;
}
.sidebar ul li:hover{
    background: #fff;
}
.sidebar ul li:hover a{
    color: #e26666;
}

.sidebar ul li a {
    width: 100%;
    text-decoration: none;
    color: rgb(255, 255, 255);
    height: 60px;
    display: flex;
    padding-left: 30px;
    justify-content: flex-start;
    align-items: center
  }
  
.sidebar ul li a i {
    min-width: 60px;
    font-size: 24px;
    text-align: center;
    align-self: flex-start;
}
.sidebar ul li a svg{
    margin-right: 15px;
    width: 25px !important;
}

/* main section starts here*/
.main {
    position: absolute;
    top: 60px;
    width: calc(100% - 260px);
    left: 260px;
    min-height: calc(100vh - 60px);
    background: #f3f3f3;
}
.cards{
    width: 100%;
    padding: 35px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}
.cards .card{
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
}
.cards .card:hover{
    background: #e26666;
}
.cards .card:hover .number{
    color: #fff;
}

.cards .card:hover .card-name{
    color: #fff;
}

.cards .card:hover .icon-box i{
    color: #fff;
}

.cards .card:hover .icon-box svg{
    color: #fff;
}

.number{
    font-size: 35px;
    font-weight: 500;
    color: #e26666;
}

.card-name{
    color: #888;
    font-weight: 600;
}
.icon-box svg,
.icon-box i {
    font-size: 45px;
    color: #e26666;
}
/* charts starts here */

.charts{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
    width: 100%;
    padding: 20px;
    padding-top: 0;
}
.chart{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 7px 25px 0 rgb(0, 0, 0, 0.08);
    width: 100%;
}

.chart h2{
    margin-bottom: 5px;
    font-size: 20px;
    color: #666;
    text-align: center;
}

canvas { max-width: 100% }

/* Responsive starts here */
@media (max-width:1115px) {
    .sidebar{
        width: 60px;
    }
    .main{
        left: 60px;
        width: calc(100% - 60px);
    }   
}
@media (max-width:880px) {
    .cards{
        grid-template-columns: repeat(2, 1fr);
    }
    .charts{
        grid-template-columns: 1fr;
    }
    #doughnut-chart{
        padding: 50px;
    }
    #doughnut{
        padding: 50px;
    }
}
@media (max-width:500px){
    .topbar{
        grid-template-columns: 1fr 5fr 0.4fr 1fr;
    }
    .cards{
        grid-template-columns: 1fr;
    }
    .logo h2{
        font-size: 20px;
    }
    .search{
        width: 80%;
    }
    .search input{
        padding: 0 20px;
    }
    .fa-bell{
        margin-right: 5px;
    }
    .user{
        width: 40px;
        height: 40px;
    }
    #doughnut-chart{
       padding: 10px; 
    }
    #doughnut{
        padding: 0;
    }
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <div class="container">
        <div class="topbar">
            <div class="logo">
                <h2>Pomodone</h2>
            </div>
            <div class="search">
                <input type="text" id="search" placeholder="search here">
                <label for="search"><i class="fas fa-search"></i></label>
            </div>
            <i class="fas fa-bell"></i>
            <div class="user">
                <img src="img/user.png" alt="">
            </div>
        </div>
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-th-large"></i>
                        <div>Dashboard</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-user-graduate"></i>
                        <div>Students</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <div>Teachers</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-users"></i>
                        <div>Employees</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-chart-bar"></i>
                        <div>Analytics</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div>Earnings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <div>Settings</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-question"></i>
                        <div>Help</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="main">
            <div class="cards">
                <div class="card">
                    <div class="card-content">
                        <div class="number">1217</div>
                        <div class="card-name">Students</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">42</div>
                        <div class="card-name">Teachers</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">68</div>
                        <div class="card-name">Employees</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="number">$4500</div>
                        <div class="card-name">Earnings</div>
                    </div>
                    <div class="icon-box">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                </div>
            </div>
            <div class="charts">
                <div class="chart">
                    <h2>Earnings (past 12 months)</h2>
                    <canvas id="lineChart"></canvas>
                </div>
                <div class="chart" id="doughnut-chart">
                    <h2>Employees</h2>
                    <canvas id="doughnut"></canvas>
                </div>
            </div>
        </div>  
    </div>

,
            data: [2500,3452,1526,5500,1278,2500,2500,3000,4000,3300,2600,2800],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
    
    }
});

const ctx2 = document.getElementById('doughnut').getContext('2d');
const myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: ['Academic', 'Non academic', 'Administration', 'Others'],
        datasets: [{
            label: 'Employees',
            data: [42, 12, 8, 6],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true
    }
});

回复收藏 0 原文

深者入戏 2025-02-13 15:45:11

方案

解决上述代码响应的解决

，我做了两件事。 1。在CSS中，

我设置了父.charts block 的display，并给出了.chart canvas Contain 20px的边距（鉴于网格差距是行不通的）。

因此，在style.css的第207行附近的某个地方，我更改

.charts {
  grid-template-columns: 1fr;
}

为

.charts {
  /* grid-template-columns: 1fr; */
  display: block;
}
.chart {
  margin-bottom: 20px;
}

2。在JavaScript中，

我将您的整个图表设置代码包装在drawchart函数中，我每次在窗口上调用它大小。如果已经存在以防止任何错误，则该图表将首先销毁。我将您的JavaScript代码更改为以下内容。

let myChart;
let myChart2;

const drawCharts = () => {
  if (myChart) {
    myChart.destroy();
  }
  const ctx = document.getElementById('lineChart').getContext('2d');
  myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',],
      datasets: [{
        label: 'Earnings in 
说明
我大量使用了 chrome devtools  @ahaworth在评论中指出，以找到可能的障碍，以找到可能的障碍。
我觉得 display：grid; 在较小的屏幕上不必要，因此更改了上层父 .charts   <代码>  display：block; 。
我还认为Chart.js将根据当前的父尺寸计算图表的大小。因此，如果调整了窗口，则需要重建图表，这是设置回调的原因。
因此，请进行这些更改，并检查它是否会根据需要工作。
我无法解释为什么如果没有上述更改，该代码在YouTuber中效果很好。
,
        data: [2500, 3452, 1526, 5500, 1278, 2500, 2500, 3000, 4000, 3300, 2600, 2800],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 3
      }]
    },
    options: {
      responsise: true,
    
    }
  });

  if (myChart2) {
    myChart2.destroy();
  }
  const ctx2 = document.getElementById('doughnut').getContext('2d');
  myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
      labels: ['Academic', 'Non academic', 'Administration', 'Others'],
      datasets: [{
        label: 'Employees',
        data: [42, 12, 8, 6],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true
    }
  });
};

drawCharts();

window.onresize = drawCharts;

说明

我大量使用了 chrome devtools @ahaworth在评论中指出，以找到可能的障碍，以找到可能的障碍。

我觉得display：grid;在较小的屏幕上不必要，因此更改了上层父.charts <代码> display：block;。

我还认为Chart.js将根据当前的父尺寸计算图表的大小。因此，如果调整了窗口，则需要重建图表，这是设置回调的原因。

因此，请进行这些更改，并检查它是否会根据需要工作。

我无法解释为什么如果没有上述更改，该代码在YouTuber中效果很好。

Solution

To make the above code responsive, I did two things.

1. In CSS

I set the display of the parent .charts to block and gave the .chart canvas container margin-bottom of 20px (given that grid-gap is won't work).

So somewhere around line 207 in style.css I changed

.charts {
  grid-template-columns: 1fr;
}

.charts {
  /* grid-template-columns: 1fr; */
  display: block;
}
.chart {
  margin-bottom: 20px;
}

2. In JavaScript

I wrapped your entire chart setting code in a drawChart function and I called it each time on the window resizes. The chart is destroyed first if it already exists to prevent any errors. I changed your JavaScript code to the following.

let myChart;
let myChart2;

const drawCharts = () => {
  if (myChart) {
    myChart.destroy();
  }
  const ctx = document.getElementById('lineChart').getContext('2d');
  myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',],
      datasets: [{
        label: 'Earnings in 
Explanation
I greatly used Chrome DevTools as @AHaworth pointed out in the comments, to find possible obstacles.
I felt that display: grid; was unnecessary on smaller screens so changed the upper parent .charts to display: block;.
I also felt that chart.js will computes the chart's size based on the current parent size. So if the window is resized, there is a need to rebuild the chart, the reason for setting the callback.
So do make these changes and check to see if it will work as you want.
I can't explain why the code worked well for the youtuber without the above changes.
,
        data: [2500, 3452, 1526, 5500, 1278, 2500, 2500, 3000, 4000, 3300, 2600, 2800],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 3
      }]
    },
    options: {
      responsise: true,
    
    }
  });

  if (myChart2) {
    myChart2.destroy();
  }
  const ctx2 = document.getElementById('doughnut').getContext('2d');
  myChart2 = new Chart(ctx2, {
    type: 'doughnut',
    data: {
      labels: ['Academic', 'Non academic', 'Administration', 'Others'],
      datasets: [{
        label: 'Employees',
        data: [42, 12, 8, 6],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true
    }
  });
};

drawCharts();

window.onresize = drawCharts;

Explanation

I greatly used Chrome DevTools as @AHaworth pointed out in the comments, to find possible obstacles.

I felt that display: grid; was unnecessary on smaller screens so changed the upper parent .charts to display: block;.

I also felt that chart.js will computes the chart's size based on the current parent size. So if the window is resized, there is a need to rebuild the chart, the reason for setting the callback.

So do make these changes and check to see if it will work as you want.

I can't explain why the code worked well for the youtuber without the above changes.

回复收藏 0 原文

~没有更多了~

关于作者

九局

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

如何使我的网站响应手机？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

方案

，我做了两件事。 1。在CSS中，

2。在JavaScript中，

说明

说明

Solution

1. In CSS

2. In JavaScript

Explanation

Explanation

关于作者

相关话题

热门标签

推荐作者

动次打次papapa

我是有多爱你

原来分手还会想你

linces

霓裳挽歌倾城醉

玍銹的英雄夢

友情链接

如何使我的网站响应手机？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

方案

，我做了两件事。 1。在CSS中，

2。在JavaScript中，

说明

说明

Solution

1. In CSS

2. In JavaScript

Explanation

Explanation

关于作者

相关话题

热门标签

推荐作者

动次打次papapa

我是有多爱你

原来分手还会想你

linces

霓裳挽歌倾城醉

玍銹的英雄夢

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。