Question

嗨，我还是网络开发的新手。所以我有一个寄存器页面作为主页面上方的div浮动，但我想知道如何确保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

我只是通过查看

看到了一个错误

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

你得到'和'之前'（最大宽度：300px）'

Answer 2

我不确定使用这些选择器的元素是什么，但我尝试制作一个示例html＆amp; css参考解决您的问题。这是链接jsfiddle.net/3Le34w8p/

Answer 3

如果没有更多信息，很难提供确切的答案（如果您添加更多HTML标记会很棒），但是......

如果问题是浮动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％或600px，以较小者为准。

2）如果您认为媒体查询可能存在问题而不是一个问题，那么测试它的一个简单方法就是在该断点处发生一些非常明显的事情...例如：< / p>

@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中被覆盖（或者由于某些规则的特殊性）。

如果您在问题中添加更多信息，请告诉我，我会再看看，但在此之前，这应该会帮助您走上正确的道路。

如何使浮动页面div响应

3 个答案: