为什么我的网页的移动版本中有空白？

Question

我正在努力做到这一点，以便当视口切换到移动设备时，桌面站点的边距消失。到目前为止，我的媒体查询如下：

@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;
    }
} 

Answer 1

您可能要尝试显式设置页面上各种元素的边距和填充，以使浏览器的默认值不会引起您的困扰。

请参见下面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 */
  }
}  

祝你好运！

Answer 2

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

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

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