底部Media Queries小屏幕不生效大屏正常，求技术支持

我看了你的代码，发现几个关键问题导致小屏幕媒体查询没生效，咱们一步步来解决：

1. .row的min-width限制了页面最小宽度 #

你给.row设置了min-width: 114rem，按照html { font-size:62.5% }（默认16px浏览器下等于10px），这个值就是1140px。也就是说，哪怕浏览器窗口缩到700px，页面实际宽度还是保持1140px（会出现横向滚动条），这就导致你的媒体查询max-width: calc(70*10px)（700px）永远不会触发——因为页面宽度始终大于700px！

这是最核心的问题，先把这个min-width改成max-width，让大屏幕下页面有最大宽度限制，小屏幕下自动收缩。

2. 媒体查询的写法可以简化 #

你用calc(40*10px)这种写法没必要，直接写400px和700px更清晰，不容易出错。

3. 小屏幕下的浮动布局清理问题 #

在小屏幕的媒体查询里，你给.contact-details加了float:left，但没有清理浮动，可能导致布局混乱，需要给父元素加清除浮动的样式。

修复后的完整CSS代码 #

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; }
body { font-weight: 400; line-height: 1.6; background-color: #150721; font-size: 1.6rem; color: white; font-family: 'Lato', sans-serif; }
.row { 
  /* 把min-width改成max-width，限制最大宽度，小屏幕自动收缩 */
  margin: 0 auto;
  max-width: 114rem; 
}
.row::after { content: ""; display: table; clear: both; }
header { height: 10rem; margin-bottom: 5rem; }
.logo { float: left; text-align: center; margin-top: 3.5rem; margin-left: 2rem; }
.main-nav { float: right; margin-top: 3rem; }
.main-nav ul li { display: inline; list-style: none; margin-left: 4rem; padding: 1rem 2rem; cursor: pointer; border-radius: 10px; }
.main-nav ul li:hover { background-color: #9329a6; }
.main-nav ul li a{ text-decoration: none; text-transform: uppercase; font-size: 90%; color: white; }
/* ************************************ */
.col-1-of-4 { width: calc((100% - 6rem) / 4); float: left; text-align: center; padding: 1rem; }
.col-1-of-4:not(:last-child) { margin-right: 2rem; }
.col-2-of-4 { width: calc(2 * ((100% - 6rem) / 4) + 2rem); float: left; padding: 1rem; }
.col-2-of-4 .course-info { width: calc((100% - 2rem) / 2); float: left; cursor: pointer; padding: 0.5rem; background-color: white; color: black; margin-bottom: 2rem; }
.col-2-of-4 .course-info:nth-child(2n+0) { margin-right: 0; }
.col-2-of-4 .course-info:nth-child(2n+1) { margin-right: 2rem; }
.col-2-of-4 .course-info h2 { text-align: center; }
.col-2-of-4 .course-info::after { content: ""; display: table; clear: left; }
.col-1-of-4 .contact-details { background-color: white; color: black; padding: 0.5rem; margin-top: 3rem; }
.col-1-of-4 ul li { list-style: none; padding: 1rem; cursor: pointer; border: 1px solid yellow; }
.col-1-of-4 ul li a { color: white; text-decoration: none; }
#about_section { background-color: #eee; padding: 2rem; margin-top: 5rem; color: black; margin-bottom: 5rem; }
.col-1-of-4__about { overflow: hidden; cursor: pointer; border-radius: 10px; box-shadow: 0rem 0rem 0.2rem 0rem grey; background-color: white; overflow: hidden; }
.col-1-of-4__about:hover { box-shadow: 0rem 0rem 0.4rem 0.2rem grey; transition: box-shadow 0.5s; }
.col-1-of-4__about img { overflow: hidden; padding: 2rem; transform: scale(1.15); transition: transform 0.5s; }
.col-1-of-4__about img:hover { transform: scale(1); }
.col-1-of-4 .heading { margin-bottom: 2rem; }
.section-bottom p { text-align: left; }
.copyright { margin-top: 2rem; margin-bottom: 2rem; padding: 2rem 0; background-color: black; text-align: center; }

/* 简化媒体查询写法，修复布局 */
@media all and (min-width: 400px) and (max-width: 700px) {
  html { font-size: 62.5%; }
  body { background-color: yellow; font-weight: bold; margin-left: 4rem; margin-right: 4rem; font-size: 1.6rem; }
  
  .col-1-of-4 { width: 100%; margin-right: 0; margin-bottom: 2rem; }
  .col-2-of-4 { width: 100%; }
  
  .col-2-of-4 .course-info { width: calc((100% - 2rem) / 2); margin-right: 2rem; margin-bottom: 2rem; }
  .col-2-of-4 .course-info:nth-child(2n) { margin-right: 0; }
  
  /* 给contact-details的父元素加清除浮动 */
  .col-1-of-4 .contact-details-wrap::after {
    content: "";
    display: table;
    clear: both;
  }
  .col-1-of-4 .contact-details { 
    width: calc((100% - 2rem) / 2); 
    margin-right: 2rem; 
    margin-bottom: 2rem; 
    float: left; 
    margin-top: 0;
  }
  .col-1-of-4 .contact-details:nth-child(2n) { margin-right: 0; }
  
  .col-1-of-4__about img { float: left; }
  .col-1-of-4__about p { margin-top: 10rem; }
  .section-bottom p { text-align: center; margin-top: 2rem; margin-bottom: 2rem; }
  .col-1-of-4__about { margin-bottom: 3rem; }
}

额外说明 #

• 修改.row的宽度属性后，大屏幕下页面最大宽度保持1140px，小屏幕下会自动适应窗口宽度，媒体查询就能正常触发了。
• 媒体查询里的选择器逻辑也做了微调，比如给.col-1-of-4加上margin-right:0和margin-bottom:2rem，避免小屏幕下的多余间距。
• 给.contact-details的父元素添加了清除浮动的伪元素，解决浮动导致的布局塌陷问题。

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