为什么我的移动版页面有空白？答案

【问题标题】：Why is there empty space in the mobile version of my page?为什么我的移动版页面有空白？
【发布时间】：2020-04-25 08:08:53
【问题描述】：

我正在努力做到这一点，以便当视口切换到移动设备时，我的桌面网站的边距消失。到目前为止，我的媒体查询看起来像这样：
@media screen and (max-width: 500px) { body { margin: 0; } .header { width: 100%; } } 我正在使用 LESS，如果这有影响的话。

编辑：标题代码如下所示：

    .header {
    background-color: @dark-red;
    display: flex;
    flex-direction: column;
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 2%;
    padding-bottom: 2%;

    .logo {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    h2 {
        display: flex;
        color: @offwhite;
        justify-content: center;
        font-family: 'Kulim Park', sans-serif;
        font-size: 1.8rem;
    }
}

【问题讨论】：

信息不足，边距可能来自其他元素，请附上示例代码，我们可以在可能的情况下重现问题

标签： css responsive-design less media-queries

【解决方案1】：

您的.header 元素的主CSS 中有margin-left: 20%; 和margin-right: 20%;，如果您没有在媒体中为.header 添加任何其他边距设置，这对于宽度小于500 像素的移动设备也有效查询宽度小于 500px 的设备。因此，这将在 header 部分中为所有尺寸左右创建 20% 的宽度。

为避免这种情况，您应该在 @media screen and (max-width: 500px) {... 媒体查询中添加以下内容：

   .header {
     margin-left: 0;
     margin-right: 0;
   }

【讨论】：

【解决方案2】：

您可能想尝试明确设置页面上各种元素的边距和内边距，这样浏览器的默认值就不会引起您的不适。

请参阅下面 CSS 的最后几行。

现场示例：https://codepen.io/panchroma/pen/BayxRLm

CSS

.header {
    background-color: red;
    display: flex;
    flex-direction: column;
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 2%;
    padding-bottom: 2%;
}

    .header .logo {
        display: flex;
        justify-content: center;
        width: 100%;
    }

.header h2 {
        display: flex;
        color: white;
        justify-content: center;
        font-family: 'Kulim Park', sans-serif;
        font-size: 1.8rem;
    }


@media screen and (max-width: 500px) {
    body {
    margin: 0;
    }
    .header {
    width: 100%;
    }

    .header,
    .logo,
    h2{
     margin:0;  /* new */
    padding:0;  /* new */
  }
}

祝你好运！

【讨论】：