媒体查询斗争

Question

所以我正在努力使我的网站具有响应能力，但在超过 1700 像素断点时遇到了问题。

My Problem

这是我的 html:

<div class="container-1">
<div class="header">
  <h2>OneDrive/ODB</h2><br><a class="one" href="#Anchor">Report a SharePoint bug here</a> 
 </div>
 <div class="table-col-1">
  <div class="border-1">
 <div class="table-head-1"> 
   <h1>Issues with OneDrive/ODB on the web?</h1>
  </div>
<div class="text-container">
 <p class="table-text">Post and vote on feature suggestions & improvements on UserVoice:</p> 
    <br><a href="#" class="button">ODC/ODB web</a>
    </div>
</div>
</div>

我的 CSS 上一个断点：

.table-col-1{
padding: 1.5em;
display: inline-block;
width: 20%;   
}

.table-head-1{
padding: 1.5em;
background-color: #515251;
display: inline-block;
border-bottom: 2px solid #000000;
}

.table-text{
font-size: 15px;
line-height: 18px;
padding-bottom: 1.5em;
}

.text-container{
padding-top: 1.5em;
padding-bottom: 3em;   
}

.border-1{
border: 2px solid #000000;
}

我的 CSS 断点不起作用：

@media screen and (min-width: 1700px) and (max-width: 4000px){
.table-head-1{
padding: 1.3em;
background-color: #515251;
display: inline-block;
border-bottom: 2px solid #000000;
}
}

如果我尝试添加一个宽度，比方说 100%，甚至 .table-col-1，我得到这个 issue。

请帮忙。谢谢！

Answer 1

在这种情况下，将宽度分配给 100% 似乎不起作用，因为您的代码还向 div 添加了不需要的额外填充。

那么，您能否尝试将“table-col-1”的样式属性更改为padding: 1.5em 0em；和 width to 100%。这里有一个工作示例：https://jsfiddle.net/m70y6jnd/

如果这对您没有帮助，请在下面的评论中告诉我。

Answer 2

向该规则添加 box-sizing: border-box - 这将包括 100% 宽度中的填充，否则将添加该填充，总计为 100% 加上给定的填充。

媒体查询斗争

Media Query Struggles

html

css

media-queries

responsive-design