如何正确编写媒体查询？解决移动端图表布局重叠问题

问题描述 #

需要实现图表与信息区块的响应式布局：桌面/笔记本端横向排列，移动端上下排列。目前桌面端显示正常，但小屏手机下图表会侵入第一个信息区块，移动端显示异常如图：

现有代码 #

HTML代码 #

<div class="justify-content-flex-start" style="margin-top: 10px; padding-left: 0%; padding-right: 1%;margin-left:15%; min-width: 320px; max-width: 1281px;">
  <div class="row" style="margin-top: 10px; padding-left: 1%; padding-right: 1%;">
</div>
</div> <!-- 第一个信息区块 -->

 <div class="container" style="width: 360px; margin-top: 10px; padding-left: 1%; padding-right: 1%; padding-bottom: 10%; margin-right: 25%">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="./src/js/graph.js"></script>
<div id="FlexCGraph justify-content: center" ><iframe class="chartjs-hidden-iframe" style="display: block; overflow: hidden; border: 0px; margin: 0px; inset: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;" src></iframe>
<canvas id="global-speed-chart" style="display: block; height: 250px; width: 100%; padding-right: 1%; margin-right: -8%; margin-top: -78%; padding-bottom: 5%; padding-top: 1%;"></canvas>
</div>
</div>
<!-- 图表区块 -->

CSS代码 #

@media only screen and (min-width: 320px) and (max-width: 1281px) {
  /* 待补充样式 */
}

@media (min-width: 1920px) {
 .dashboard {
   padding: 15px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
           align-items:center;
           align-content: center;
           justify-content: flex-end;
 }
}
@media only screen and (min-device-width: 360px) {
 .dashboard__desc {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: 100%;
   position: relative;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   padding-top: 10px;
   align-content: center;
   align-items: center;
   justify-content: flex-start;
 }
}
@media only screen and (min-device-width: 360px){
.crypto-card{
 width: 360px;
 height: 215px;
 background: white;
 right: 40px;
 padding: 10px;
 margin: 10px;
 border: 0.1px solid rgb(220, 220, 220);
 max-width: 360px;
 align-content: center;
 align-items: center;
 justify-content: center;
}
}
@media only screen and (min-device-width: 360px){
.row{
 align-content: center;
   align-items: center;
   justify-content: center;
}
}
@media only screen and (min-device-width: 360px){
.crypto-card .body{
 width: 100%;
 padding: 20px;
 margin: 2px;
 font-size: -0.4rem;
 font-family: 'Myriad Pro', sans-serif;
 position: relative;
 top: 5px;
 align-content: center;
   align-items: center;
   justify-content: center;
}
}
#FlexCGraph
{
 align-content: center;
 align-items: center;
 justify-content: flex-end;
 position: absolute;
 padding: 10px 10px 10px 10px;
 margin: auto;
 width: 360px;
 height: 215px;
  max-width: 360px;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-align-self: auto;
  align-self: auto;
  background-color: transparent;
  border: 0.1px solid rgb(220, 220, 220);
  box-sizing: border-box;
  flex: 0 0 50%;
}
#wb_FlexCGraph
{
 align-content: center;
   align-items: center;
   justify-content: flex-end;
 padding-left: 10%;
  visibility: visible;
  display: block;
  -webkit-flex-grow: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-align-self: auto;
  align-self: auto;
}
}

修复方案 #

1. 移除绝对定位，让图表回到文档流 #

#FlexCGraph设置的position: absolute会脱离文档流，直接覆盖其他元素。移动端需改为静态定位，恢复正常布局顺序：

@media only screen and (max-width: 768px) {
  #FlexCGraph {
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 10px 0;
  }
}

2. 统一响应式断点，明确flex方向 #

以768px为分界，区分桌面和移动端的排列方向：

/* 桌面端：横向排列 */
@media (min-width: 768px) {
  .dashboard {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* 移动端：纵向排列 */
@media (max-width: 767px) {
  .dashboard {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}

3. 清理内联样式冲突 #

移除HTML中干扰布局的内联样式，统一移到CSS管理：

• 删除第一个区块的margin-left:15%，改用flex或margin:auto实现居中
• 删除canvas的margin-top:-78%、margin-right:-8%等负边距，避免图表偏移

4. 适配移动端容器宽度 #

取消移动端容器的固定宽度，改用百分比适配屏幕：

@media (max-width: 767px) {
  .container {
    width: 100% !important;
    margin-right: 0 !important;
    padding-bottom: 5%;
  }
}

5. 修复HTML语法错误 #

id="FlexCGraph justify-content: center"写法错误，id不能包含空格和样式，修改为：

<div id="FlexCGraph" style="justify-content: center;">

内容的提问来源于stack exchange，提问作者jade1411