当网站切换到移动视图时如何摆脱一些间距答案

【问题标题】：How to get rid of some spacing when website switches to mobile view当网站切换到移动视图时如何摆脱一些间距
【发布时间】：2019-04-09 19:18:18
【问题描述】：

我正在尝试创建一个登录页面，人们可以在其中点击他们想要访问的网站。我是编码新手，需要一些有关网站移动版本的帮助。我想消除一些间距，但我不知道该怎么做。

看到这里，我正在尝试消除移动版本上图像块之间的间距。 Mobile version of site

谢谢！

CSS

 body {
      width:100%;
      height: 100%;
      margin: 0;
    }

    .flex {
   display:flex;
   max-width: 80%;
    }
    .flex div{
      flex:1;
      padding:20px;
    }

    img{
      margin:30% auto 30%;
      width:100%;

@media only screen and (max-width:620px) {
  .flex, .flex div, img {
    display:inline;
    width:100%;
    float:left;
  }
}

HTML

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" />
    </div>

  </div>


</body>
</html>

【问题讨论】：

请创建一个有效的 js fiddle 示例供我们直观地查看。还要摆脱所有那些 -moz 和 -webkit 前缀，它们伤害了我们的眼睛，你不再需要它们了

标签： html css

【解决方案1】：

您应该向我们提供更多信息。但是要摆脱所有间距，您可以在移动设备上试试这个：

@media only screen and (max-width:620px) {
  .flex, .flex div, img {
    display:inline;
    width:100%;
    float:left;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

【讨论】：

抱歉，我很难解释我想要做什么。 .但是您的代码似乎已经固定了间距！谢谢！

【解决方案2】：

有几点需要改变：

杀死媒体查询中的浮动。你正在使用 flex，所以
将重置添加到 html 和正文。
在媒体查询中使用 justify-content 和 flex-direction。将最大宽度设置为 100%

错误的 TL:DR 是您我们在媒体查询上浮动元素，并为它们提供小于 100% 的宽度，这就是为什么它们没有以移动设备为中心。

    html, body {
      width:100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .flex {
   display:flex;
   max-width: 80%;
    }
    .flex div{
      flex:1;
      padding:20px;
    }
    img{
      margin:30% auto 30%;
      width:100%;
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
    img:hover {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

@media only screen and (max-width:620px) {
  .flex {
    justify-content: center;
    flex-direction: column;
    max-width:100%;
  }
}

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" />
    </div>

  </div>


</body>
</html>

希望这会有所帮助。

【讨论】：