Question

我正在设计网站，但是在CSS中放置盒子时遇到了问题。当您从桌面上看到它时，它看起来不错，但是在手机的那一刻，它并没有完全响应，也没有居中。我不明白我的代码有什么问题。

HTML

  <div class="cuadrado">
  <div class="franja">    
  <h1>Mario</h1>
  <h4>Web Developer</h4>
  </div>

CSS

.cuadrado {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
background-attachment: fixed;
background-color: #f7f7f7;
height: 500px;
width: 462px;
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
border: 0px none #000000;
}

.foto {
    position: relative;
    left: 190px;
    top: -125px;
    height: 100px;
    width: 100px;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    background-size: 100% auto;

}

.franja {
    position: relative;
    top: 62px;
    height: 150px;
    width: 100%;
    background-color: #EFF2F2;
  }

在这里您可以在线查看它：https://mariomuratori.github.io/contact

感谢您的帮助！

Answer 1

在手机上显示效果不佳的原因是因为您使用的是静态像素，并且手机上的分辨率与显示器上的分辨率不同。

您可以尝试签出这样的教程以获取帮助，以使其在两种设备上都可以响应： https://www.w3schools.com/html/html_responsive.asp

Box元素不在CSS上居中

1 个答案: