在移动设备和桌面上正确显示 HTML/CSS答案

【问题标题】：Display HTML/CSS properly on mobile and desktop在移动设备和桌面上正确显示 HTML/CSS
【发布时间】：2020-10-01 17:40:15
【问题描述】：

现在下面的代码可以在不同的移动平台和不同的移动浏览器上完美显示。出于某种原因，当我将其加载到桌面浏览器时，图像与链接重叠。

在移动设备上，图片在链接上方完美居中，而桌面版图片与链接重叠。有什么帮助吗？

主要问题是图像的位置。

CSS：

    html {
  font-size: 20px;
  box-sizing: border-box;
}

body {
  background-color: #1abc9c;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.btn {
  border: 5px solid #2c3e50;
  color: #2c3e50;
  display: block;
  font-family: 'trebuchet ms';
  font-size: 2rem;
  letter-spacing: 0.1rem;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  }
.btn::before {
  content: "";
  background-color: #E26A6A;
  box-shadow: 10px 10px 0 #F1C40F, 
              20px 20px 0 #3498DB;
  position: absolute;
  left: 0.25rem;
  top: 0.5rem;
  height: 102%;
  width: 102%;
  z-index: -1;
  transition: all 0.4s ease;
}

.btn:hover::before {
  box-shadow: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
    .tools
    {
      position:absolute;
      top: 25px;
      left: 0px;
      z-index: 2;
    }

html：

    <body>
    <img src="tools.png" class="tools">
<div class="wrapper">
  <a href="#" class="btn">< MICROSOFT_LOGGER ></a>
  <br>
  <br>
  <a href="#" class="btn">< OFFICE_TOOL_LOGGER ></a>
  <br>
  <br>
  <a href="#" class="btn">< WEB_MON_COMPUTER ></a>
  <br>
  <br>
  <a href="#" class="btn">< WEB_MON_ANDROID ></a>
</div>
</body>

https://codepen.io/brandon-humphrey/pen/wvMGJzN

桌面视图： https://ibb.co/6YVZC13

移动端视图： https://ibb.co/7QFcdn3

【问题讨论】：

如果要显示“大于”和“小于”符号，请在 html 中使用 &gt; 和 &lt;。

标签： html css

【解决方案1】：

那是因为您使用position: absolute 来定位您的图像。这对您的元素所做的就是将其从正常的文档流中移除，并且不再在页面布局中为其创建空间。

我推荐你read more about positioning in CSS，这样你就可以弄清楚你需要什么并去做！

小提示：您可能想要的主要是使用 Flexbox 来正确定位所有内容，只需将 body 中的 flex-direction 设置为 column 即可获得更好的结果（尽管我建议将您的 flexbox 作为样式div不是整个身体）。另外，删除您为tools 编写的CSS 类，以及您为body 指定的高度。

【讨论】：

【解决方案2】：

您在移动设备上获得所需效果的事实是侥幸。按钮的包装是垂直居中的，因此有足够的空间让图像位于顶部而不覆盖您的按钮。一旦由于屏幕是横向的而减少了垂直空间，您的绝对定位图像就会覆盖按钮。

如果您希望效果保持一致，我建议您删除工具类的所有样式，并将flex-direction:column; 添加到您的正文样式中。您可能仍然需要摆弄它才能获得全部效果，但这将为您提供基础知识。

【讨论】：