html - 如何使 float 页面 div 响应

Question

您好，我还是网络开发的新手。所以我有一个作为 div float 在主页上方的注册页面，但我想知道如何确保 div 以响应方式居中？

页面被分开并包含在页眉中。

<?php 
include ('includes/login.php');
include ('includes/register.php');
?>

我的寄存器的CSS

#regScreen {
    padding: 5 5 40px 5px;
    margin: 0 auto;
    position: fixed;
    top: 5%;
    left: 33%;
    z-index: 10;
    display: none;
    background: #ebebeb;
}

#regScreen:target, #regScreen:target+#cover {
    display: block;
    opacity: 2;
}

#reghead {
    background-color: #e2e1e1;
    text-align: center;
    display: block;
    padding: 0px 0px 10px 0px;
}

我尝试在我的#regscreen 上使用媒体查询:

@media (max-width: 300px) {
  #regScreen {width: 100%;
  left:0%;
}
}

但是使用媒体查询似乎无法将页面识别为响应式页面，因为它已经很小了。根据我的理解，如果我错了，请纠正我。

Answer 1

如果没有更多的信息，很难提供准确的答案(如果您添加更多的 HTML 标记会更好)，但是...

如果问题是 float 的 div 没有调整大小以适应各种屏幕尺寸(并且由于您是网络开发的新手......欢迎加入!)，有几个建议我可以:

1) 您可能通过尝试应用 @media (max-width:300px) 媒体查询来过度复杂它。通过简单地添加以下样式，注册表单应该可以准确地调整大小:

#regScreen {

  /* The rest of your styles go here */

  width:90%;
  max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */

}

这将确保表单的宽度始终为屏幕宽度的 90% 或 600 像素，以较小者为准。

2) 如果您认为未触发媒体查询可能存在问题，测试它的一种简单方法是在该断点处做一些非常明显的事情...例如:

@media (max-width: 300px) {

  /* Test Style */
  /* Turn background red when below 300px */
  body{
    background-color:red !important;
  }

  /* Your original styles */
  #regScreen {
    width: 100%;
    left:0%;
  }

}

通过这样做，它应该允许您开始排除故障，无论是您的媒体查询语法还是其他问题；也许媒体查询样式被正确应用(因此您的媒体查询语法没问题)但新样式稍后在 CSS 中被覆盖(或由于某些规则的特殊性)。

如果您向您的问题添加更多信息，请告诉我，我会再看一遍，但在此之前，这有望帮助您走上正轨。