響應性使用媒體查詢

@media all and (max-width: 800px) { 
 
    /*Charts*/ 
 
    .chart-1 { 
 
     width: 100%; 
 
     margin-bottom: 20px; 
 
     margin-left: 5%; 
 
     box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
 
     float: left; 
 
    } 
 

 
    .chart-2 { 
 
     width: 100%; 
 
     margin-bottom: 20px; 
 
     margin-left: 5%; 
 
     box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
 
     float: left; 
 
    } 
 

 
    .chart-3 { 
 
     width: 100%; 
 
     margin-bottom: 20px; 
 
     margin-left: 5%; 
 
     box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
 
     float: left; 
 
    } 
 

 
    .chart-4 { 
 
     width: 100%; 
 
     margin-bottom: 20px; 
 
     margin-left: 5%; 
 
     box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
 
     float: left; 
 
    } 
 

 
    .cg-chart-1 { 
 
     width: 90%; 
 
     height: 90%; 
 
    } 
 

 
    .cg-chart-2 { 
 
     width: 90%; 
 
     height: 90%; 
 
    } 
 

 
    .cg-chart-3 { 
 
     width: 90%; 
 
     height: 90%; 
 
    } 
 

 
    .cg-chart-4 { 
 
     width: 90%; 
 
     height: 90%; 
 
    } 
 
} 
 

 
.chart-1 { 
 
    width: 620px; 
 
    height: 400px; 
 
    margin: 0 auto; 
 
    margin-left: 5%; 
 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
 
    float: left; 
 
} 
 

 
.chart-2 { 
 
    width: 420px; 
 
    height: 400px; 
 
    margin: 0 auto; 
 
    margin-left: 2%; 
 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
 
    float: left; 
 
} 
 

 
.chart-3 { 
 
    width: 600px; 
 
    height: 400px; 
 
    margin: 0 auto; 
 
    margin-left: 2%; 
 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
 
    float: left; 
 
} 
 

 
.chart-4 { 
 
    width: 1717px; 
 
    height: 400px; 
 
    margin: 0 auto; 
 
    margin-left: 5%; 
 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
 
    float: left; 
 
    margin-top: 50px; 
 
}

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
    <script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script> 
 
    <script src="https://code.highcharts.com/modules/data.js"></script> 
 
    <script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 

 
<body class="body"> 
 

 
    
 
     <div class="cg-chart-1"><div id="container-chart-1" class="chart-1"></div></div> 
 

 
     <!--Container do Gráfico 2--> 
 
     <div class="cg-chart-2"><div id="container-chart-2" class="chart-2"></div></div> 
 

 
     <!--Container do Gráfico 3--> 
 
     <div class="cg-chart-3"><div id="container-chart-3" class="chart-3"></div></div> 
 

 
     <!--Container do Gráfico 4--> 
 
     <div class="cg-chart-4"><div id="container-chart-4" class="chart-4"></div></div> 
 

 
     <!--Gráfico 1--> 
 
     <script> 
 
      Highcharts.chart('container-chart-1', { 
 
       chart: { 
 
        type: 'bar' 
 
       }, 
 
       title: { 
 
        text: 'RANKING VENDEDORES' 
 
       }, 
 
       subtitle: { 
 
        text: 'Receita' 
 
       }, 
 
       xAxis: { 
 
        categories: ['Maria', 'José', 'Rogério', 'Ricardo', 'Michelle'], 
 
        title: { 
 
         text: null 
 
        } 
 
       }, 
 
       yAxis: { 
 
        min: 0, 
 
        title: { 
 
         text: 'R$', 
 
         align: 'high' 
 
        }, 
 
        labels: { 
 
         overflow: 'justify' 
 
        } 
 
       }, 
 
       tooltip: { 
 
        valueSuffix: ' millions' 
 
       }, 
 
       plotOptions: { 
 
        bar: { 
 
         dataLabels: { 
 
          enabled: true 
 
         } 
 
        } 
 
       }, 
 
       legend: { 
 
        layout: 'vertical', 
 
        align: 'right', 
 
        verticalAlign: 'top', 
 
        x: -40, 
 
        y: 80, 
 
        floating: true, 
 
        borderWidth: 1, 
 
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
 
        shadow: true 
 
       }, 
 
       credits: { 
 
        enabled: false 
 
       }, 
 
       series: [{ 
 
        name: 'Junho 2017', 
 
        data: [107, 31, 635, 203, 2] 
 
       }, { 
 
        name: 'Julho 2017', 
 
        data: [133, 156, 947, 408, 6] 
 
       }, { 
 
        name: 'Agosto 2017', 
 
        data: [1052, 954, 4250, 740, 38] 
 
       }] 
 
      }); 
 
     </script> 
 

 
     <!--Gráfico 2--> 
 
     <script> 
 

 
      var gaugeOptions = { 
 

 
       chart: { 
 
        type: 'solidgauge' 
 
       }, 
 

 
       title: null, 
 

 
       pane: { 
 
        center: ['50%', '50%'], 
 
        size: '80%', 
 
        startAngle: -90, 
 
        endAngle: 90, 
 
        background: { 
 
         backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', 
 
         innerRadius: '60%', 
 
         outerRadius: '100%', 
 
         shape: 'circle' 
 
        } 
 
       }, 
 

 
       tooltip: { 
 
        enabled: false 
 
       }, 
 

 
       yAxis: { 
 
        stops: [ 
 
         [0.1, '#7CB5EC'] 
 
        ], 
 
        lineWidth: 0, 
 
        minorTickInterval: null, 
 
        tickAmount: 2, 
 
        title: { 
 
         y: -70 
 
        }, 
 
        labels: { 
 
         y: 16 
 
        } 
 
       }, 
 

 
       plotOptions: { 
 
        solidgauge: { 
 
         dataLabels: { 
 
          y: 5, 
 
          borderWidth: 0, 
 
          useHTML: true 
 
         } 
 
        } 
 
       } 
 
      }; 
 

 
      var chartSpeed = Highcharts.chart('container-chart-2', Highcharts.merge(gaugeOptions, { 
 
       yAxis: { 
 
        min: 0, 
 
        max: 200, 
 
        title: { 
 
         text: '' 
 
        } 
 
       }, 
 

 
       credits: { 
 
        enabled: false 
 
       }, 
 

 
       series: [{ 
 
        name: '', 
 
        data: [80], 
 
        dataLabels: { 
 
         format: '<div style="text-align:center"><span style="font-size:25px;color:' + 
 
         ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + 
 
         '<span style="font-size:12px;color:silver"></span></div>' 
 
        } 
 
       }] 
 

 
      })); 
 
     </script> 
 

 
     <!--Gráfico 3--> 
 
     <script> 
 
      Highcharts.chart('container-chart-3', { 
 
       chart: { 
 
        type: 'pie' 
 
       }, 
 
       title: { 
 
        text: 'SITUAÇÃO CLIENTES' 
 
       }, 
 
       plotOptions: { 
 
        series: { 
 
         dataLabels: { 
 
          enabled: true, 
 
          format: '{point.name}: {point.y:.1f}%' 
 
         } 
 
        } 
 
       }, 
 

 
       series: [{ 
 
        name: 'Clientes', 
 
        colorByPoint: true, 
 
        data: [{ 
 
         name: 'INATIVOS', 
 
         y: 45 
 
        }, { 
 
         name: 'POSITIVADOS', 
 
         y: 23 
 
        }, { 
 
         name: 'ATIVOS', 
 
         y: 32 
 
        }] 
 
       }] 
 
      }); 
 
     </script> 
 

 
     <!--Gráfico 4--> 
 
     <script> 
 
      Highcharts.chart('container-chart-4', { 
 
       chart: { 
 
        type: 'line' 
 
       }, 
 
       title: { 
 
        text: 'Resultado Diário' 
 
       }, 
 
       subtitle: { 
 
        text: 'Mês Atual' 
 
       }, 
 
       xAxis: { 
 
        categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'] 
 
       }, 
 
       yAxis: { 
 
        title: { 
 
         text: 'Percentual Atingido' 
 
        } 
 
       }, 
 
       plotOptions: { 
 
        line: { 
 
         dataLabels: { 
 
          enabled: true 
 
         }, 
 
         enableMouseTracking: false 
 
        } 
 
       }, 
 
       series: [{ 
 
        name: 'RECEITA', 
 
        data: [79.02, 122.81, 119.52, 32.77, 121.14, 128.59, 153.65, 110.51, 143.37, 109.86, 8.86, 120.25, 136.49, 163.17, 90.46] 
 
       }, { 
 
        name: 'VOLUME', 
 
        data: [68.79, 106.65, 98.35, 28.62, 101.19, 102.13, 121.39, 85.31, 111.32, 84.88, 20.44, 88.41, 105.23, 131.66, 71.81] 
 
       }, { 
 
        name: 'POSITIVAÇÃO', 
 
        data: [27.60, 38.10, 68.70, 15.60, 45.60, 72.30, 71.40, 75.30, 59.40, 61.20, 3, 51.60, 73.50, 61.80, 46.50] 
 
       }] 
 
      }); 
 
     </script> 
 
</body>

我有4個圖表的屏幕。只要屏幕能夠像這樣展示他們，3個第一個就會並排放置在一起。否則，它們全部以100％的寬度顯示在彼此之下。

這是我對圖表HTML：

<!--Container do Gráfico 1--> 
    <div class="cg-chart-1"><div id="container-chart-1" class="chart-1"></div></div> 

    <!--Container do Gráfico 2--> 
    <div class="cg-chart-2"><div id="container-chart-2" class="chart-2"></div></div> 

    <!--Container do Gráfico 3--> 
    <div class="cg-chart-3"><div id="container-chart-3" class="chart-3"></div></div> 

    <!--Container do Gráfico 4--> 
    <div class="cg-chart-4"><div id="container-chart-4" class="chart-4"></div></div>

這是CSS代碼：

.chart-1 { 
    width: 620px; 
    height: 400px; 
    margin: 0 auto; 
    margin-left: 5%; 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
    float: left; 
} 

.chart-2 { 
    width: 420px; 
    height: 400px; 
    margin: 0 auto; 
    margin-left: 2%; 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
    float: left; 
} 

.chart-3 { 
    width: 600px; 
    height: 400px; 
    margin: 0 auto; 
    margin-left: 2%; 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
    float: left; 
} 

.chart-4 { 
    width: 1717px; 
    height: 400px; 
    margin: 0 auto; 
    margin-left: 5%; 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
    float: left; 
    margin-top: 50px; 
}

我也得到類似this。這很好，但是當屏幕變得更小時，我希望它像this。要做到這一點，我有這個CSS：

.chart-1 { 
    width: 100%; 
    margin-bottom: 20px; 
    margin-left: 5%; 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
    float: left; 
} 

.chart-2 { 
    width: 100%; 
    margin-bottom: 20px; 
    margin-left: 5%; 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
    float: left; 
} 

.chart-3 { 
    width: 100%; 
    margin-bottom: 20px; 
    margin-left: 5%; 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
    float: left; 
} 

.chart-4 { 
    width: 100%; 
    margin-bottom: 20px; 
    margin-left: 5%; 
    box-shadow: -1px 3px 3px 3px rgb(167,167,167); 
    float: left; 
} 

.cg-chart-1 { 
    width: 90%; 
    height: 90%; 
} 

.cg-chart-2 { 
    width: 90%; 
    height: 90%; 
} 

.cg-chart-3 { 
    width: 90%; 
    height: 90%; 
} 

.cg-chart-4 { 
    width: 90%; 
    height: 90%; 
}

它也正常工作。這兩個代碼都讓我得到我想要的，但我使用的媒體查詢不會更改圖表的屬性。我目前正在使用：

@media (max-width: 1200px) {/*Code for the charts*/}

爲什麼媒體查詢不會更改我的圖表的CSS？我必須說這是我第一次使用媒體查詢。提前致謝。

編輯：片段後面跟着圖表的所有代碼。請注意，如果您刪除媒體查詢中的css並用圖表的實際CSS替換，則它們都可以正常工作。這只是媒體查詢，不知何故被竊聽。

來源

2017-08-11 William

按我的理解，你需要在媒體查詢的教程.. 使用這一個：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ –

一切似乎非常好，你可以發佈整個CSS媒體查詢？可能會有錯字 –

如果你可以使用jsfiddle或codepen提供演示將會很棒 – niemaszoka

我認爲問題是規則的順序。先嚐試製定一般規則，然後嘗試使用媒體查詢規則。現在，底層規則正在壓倒你之前在媒體查詢中投入的規則。

來源

2017-08-11 16:39:54 niemaszoka

謝謝！它真的壓倒了它。 – William

這是因爲你的媒體查詢應該是例如

@media screen and (max-width: 1200px) { 
    /*Code for the charts*/ 
}

或

@media all and (max-width: 1200px) { 
    /*Code for the charts*/ 
}

來源

2017-08-11 15:32:47

仍然和以前一樣... – William

在css規則之後爲更大的屏幕添加媒體查詢。因此，您的媒體查詢CSS屬性將被默認規則覆蓋。 –

我一直在使用：

@media only screen and (min-width: 768px) { 
    /* tablets and desktop */ 
} 

@media only screen and (max-width: 767px) { 
    /* phones */ 
} 

@media only screen and (max-width: 767px) and (orientation: portrait) { 
    /* portrait phones */ 
}

這使事情變得相對簡單，可以讓你在肖像模式下爲手機做一些有點不同的事情（很多時候我發現自己不得不改變各種元素nts他們）。

來源

2017-08-11 15:35:51

這也是我的問題，但由於某種原因，它不起作用。我對其他HTML部件使用相同的媒體查詢，但似乎只有圖表無法正常工作。 – William

好吧，不用擔心，您可以創建一個代碼提琴，以便我可以測試您的代碼，並讓我知道我編輯帖子的同一 –

的最佳解決方案。你會在那裏找到所有的代碼。 – William

響應性使用媒體查詢

回答

相關問題